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