移动web-rem

来源:互联网 发布:淘宝买毒品暗语 编辑:程序博客网 时间:2024/05/18 16:36

转载自: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,

原创粉丝点击