CSS3 的字体大小单位「rem」到底好在哪？

Question

CSS3 新增了相对单位 rem，使用 rem 同 em 一样皆为相对字体大小单位，不同的是 rem 相对的是 HTML 根元素。但是使用 rem 的…

关注者

518

被浏览

173,358

登录后你可以

不限量看优质回答私信答主深度交流精彩内容一键收藏

以需求来介入：

都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。

我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小。

（1）iPhone4的时候，希望网页的内容文字大小12px=12*（320/320）px，按钮的大小是240px。

（2）Iphone6的时候，虚妄网页的内容文字大小14px=12*（375/320）px，按钮的大小是280px，等比缩放。

（3）Iphone6 Plus的时候，虚妄网页的内容文字大小15.5px=12*（414/320）px，按钮的大小是310px，等比缩放。

以前的做法

在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制

viewport 的 initial-scale （网页缩放比例）。

如：iPhone4下：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

那么对应的到了iPhone6需要调整缩放比例 initial-scale=375/320 =1.18

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />

同理到了iPhone6 Plus对应的应该是 initial-scale=414/320 =1.30

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=3.0 />

早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。

缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。

rem做法

现在【天猫】的做法就是用rem来做。

rem（font size of the root element）是指相对于根元素的字体大小的单位（可以联想一下em）。也就是比如我定义：

html{ font-size:14px}

那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是

.test-box{
        font-size:2rem;
       /*font-size:28px;*/
       /*2*14px/
}
我们可以理解为，一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会变化。

我们来看一下【淘宝】的实例：

先展示效果，可以看到页面上的文字、按钮、logo都有相应的变大调整。

iPhone4下的效果。

iPhone6下的效果。

iPhone6 Plus下的效果。

（图片上传太慢，图片上传不了啊.........，用代码展示）

iPhone4下html节点font-size

<html data-dpr="2" style="font-size: 64px; width: 100%; height: 100%; overflow: hidden;">

iPhone6下html节点font-size

<html data-dpr="2" style="font-size: 75px; width: 100%; height: 100%; overflow: hidden;">

iPhone6 Plus下html节点font-size

<html data-dpr="2" style="font-size: 82.8px; width: 100%; height: 100%; overflow: hidden;">

具体大家可以去看【淘宝】的移动端页面的案例。

给大家介绍一片写rem的详细文章。腾旭ISUX的一篇文章。