移动端适配之rem详解

移动端适配之rem详解

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。
1rem等于根元素的font-size，即只需要设置根元素的font-size，其它元素使用rem单位时，设置成相应的百分比即可。

为什么需要rem？（与传统的单位的区别）

px：是相对于显示器屏幕分辨率而言的相对长度单位。在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

em：是继承父级的（相对于父元素）。假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，受父级的影响会越来越麻烦。所以rem就出现了。

rem：是em的升级版，rem只会相对根元素字体大小的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。

兼容性

rem是CSS3新引进来的一个度量单位，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只有IE6-8无法兼容。

那么如何调整兼容性呢？

为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值,IE6~IE8将自动忽略它们所无法识别的rem单位。例：

html {
   
    font-size: 20px; 
}
body {
   
    font-size: 12px;
    font-size: 1.2rem; /* 12÷10=1.2 */
}
p {
   
    font-size: 14px;
    font-size: 1.4rem;
}

rem使用（适配）

rem换算适配代码（例稿宽度：640，字体值：20）：

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
   
 html,body {
   
 font-size:16.875px;
 }
 }
 @media only scre