rem是实现自适应布局的常用方法。
| rem | 以根元素字体大小为基准，font size of root element |
|---|---|
| em | 以父元素字体大小为基准 |
<html>的字体大小为14px，1rem就等于14px，2rem就等于28px
设置根元素<html> font-size属性值的方式：
- 通过js读取屏幕宽度，根据宽度计算对应的尺寸并设置根元素
font-size值。 一般项目以320px的屏幕为基准，设置font-size为12px。
防止设置<html>的font-size造成页面抖动，这部分代码放在header底部加载，并内联到html文档中。
- 媒体查询
通过CSS3媒体查询，不同的屏幕设置不同的<html>字体大小。
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}
@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}
@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}
body {
max-width: 640px
}
}
项目中px转rem的计算可以借助工具完成：
- sass-rem
- webpack项目可以使用 px-to-rem-loader
