声明：学习和引用的原网址http://caibaojian.com/web-app-rem.html
一、什么是rem？
rem（font size of the root element）是一个相对于根元素<html>的字体单位。与px像素不同，它是一个相对单位，而rem是相对于根元素html，em则是相对于父元素。
二、为什么web app要使用rem？
1、实现强大的屏幕适配布局，能等比例适配所有屏幕：
2、没有屏幕字体缩放问题：
3、没有em多次使用计算麻烦的问题：
三、计算出不同分辨率下font-size的值的方法
1.媒体查询@media
关于媒体查询@media(css3):
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
适用场景：改变不多的业务。
优点：只需要在做web app先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置，就能实现适配。
缺点：不能所有设备全适配。
核心代码示例：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
2.js
有好几个比较热门的库可以帮助我们解决移动端自适应可伸缩布局的问题。
⑴.阿里团队开源的一个库： lib-flexible
来自官方无奈的声明
网友评论