移动端适配之rem详解

2017-06-14 本文已影响564人一只好奇的茂

rem是什么

rem（font size of the root element）是指相对于根元素的字体大小的单位。
1rem等于根元素htm的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只会相对html的值，不会受到父级的影响，这样的好处在于：从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 screen and (max-width: 960px), only screen and (max-device-width:960px) {
 html,body {
 font-size:15px;
 }
 }
 @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
 font-size:12.5px;
 }
 }
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
 font-size:11.25px;
 }
 }
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
 font-size:10px;
 }
 }
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
 font-size:9.375px;
 }
 }
 @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
 html,body {
 font-size:8.4375px;
 }
 }
 @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
 html,body {
 font-size:7.5px;
 }
 }
 @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
 html,body {
 font-size:6.46875px;
 }
 }
 @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
 html,body {
 font-size:6.25px;
 }
 }
 @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
 html,body {
 font-size:5.859375px;
 }
 }
 @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
 html,body {
 font-size:5.625px;
 }
 }
 @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
 html,body {
 font-size:5px;
 }
 }
 @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
 html,body {
 font-size:3.75px;
 }

使用rem需要注意的地方

通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem 可能会导致布局错位，比如这样一个回顶部的按钮：
Chrome及后来加入Webkit阵营的Opera都不支持页面字号小于12px，如果希望你的程序足够安全，尽量不要定义小于12px的字号。
比如这样的：

html {
  font-size: 10px
}

因为部分浏览器会将小于 12px 的字变成 12px 来显示。那么此时，在这些浏览器下，如果我做了这样的定义：

.demo {
    width: 10rem;
}

你预期得到10px ✖️ 10rem = 100px，但实际上因为10px小于12px，会默认使用12px来替换10px。所以变成了12px ✖️10rem = 120px。这是非常大的错误，我们应当尽量避免。

chrome中body使用rem失效
问题：在 Chrome 和 Opera 上，如果我们给 body 元素应用了 rem，取值将会计算错误。
代码如下：

html {
  font-size: 10px;
}
body {
  font-size: 1.4rem;
}

我们预期 body的 font-size 为 14px，然而实际情况与我们想象的不太一样，最终 body 的计算值并不是 14px，它忽略了 html 的定义，而是直接使用了浏览器的默认字号作为参照。于是最终计算值为：16px ✖️ 1.4rem = 22.4px。测至 chrome 45.0 和Opera 33.0 仍然存在这个问题，不过 chrome 49.0 和 Opera 37.0 看起来已经被修复了。
为了有效的绕过这个问题，并且实现相同的效果，我们可以将代码修改如下：

html {
  font-size: 10px;
}
body {
  font-size: 1.4em;
}

由于 body 是 html 的直接子元素，所以此时对 body 使用 em 与 rem 的效果是相同的。em是参照父元素进行换算的。

不要对html设置百分比字号
虽然大部分浏览器的默认字号是 16px，但仍然有使用其它默认值的浏览器，比如我依稀记得 firefox 使用了15px。而且最重要的是，用户是可以改变浏览器默认字号的，所以你认为的可能并不是你认为的。

批量转换rem的工具

已经在工程中大量使用px单位想转成rem单位，可以用这个工具：
nodeJs脚本工具
为了方便更对px更有感觉的前端人员，在写代码时，将px单位自动转为rem单位的插件：
sublime插件
在线批量转css文件：
http://www.520ued.com/tools/rem
在线转css代码：
http://alurk.com/

参考文章

前端rem单位的正确使用姿势