分针网—每日分享：移动端适配之rem详解

领取免费IT资料 加群：272292492



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需要注意的地方

1.通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem 可能会导致布局错位，比如这样一个回顶部的按钮：



2.Chrome及后来加入Webkit阵营的Opera都不支持页面字号小于12px，如果希望你的程序足够安全，尽量不要定义小于12px的字号。

比如这样的：

html {font-size: 10px}

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

.demo { width: 10rem;}

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

3.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是参照父元素进行换算的。

4.不要对html设置百分比字号

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

批量转换rem的工具

已经在工程中大量使用px单位想转成rem单位，可以用这个工具：

nodeJs脚本工具

为了方便更对px更有感觉的前端人员，在写代码时，将px单位自动转为rem单位的插件：

sublime插件

在线批量转css文件：
http://www.520ued.com/tools/rem
在线转css代码：
http://alurk.com/
更多文章：www.f-z.cn