转载自:http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/#prettyPhoto
兼容性
ios:6.1系统以上都支持
android:2.1系统以上都支持
rem设置字体大小
意思就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小的,
现在大部分浏览器IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示font-size是16px:
html {
font-size:16px;
}
设置字体大小12px:
p {
font-size: 0.75rem; //12÷16=0.75(rem)
}
rem不仅可以适用于字体,同样可以用于width height margin这些样式的单位。
rem进行屏幕适配
rem数值计算
如果利用rem来设置css的值,一般要通过一层计算才行,比如如果要设置一个长宽为100px的div,那么就需要计算出100px对应的rem值是 100 / 16 =6.25rem,