相对单位em 和 rem --读《CSS in depth》

1，绝对单位和相对单位

2，em的使用分三种情况：

1，把各个方向的padding的值设置为字号大小

2，对font-size 使用em

3，对font-size和padding等同时使用相对单位

3，rem

3.1，相对单位和响应式（一个例子）

1，绝对单位和相对单位

对于现在的互联网，页面有可能会在各种型号的屏幕上展示。既可能是一个5英寸的手机屏，也有可能是一个30英寸的大屏幕。面对这种情况，前端就应该声明一些样式规则，可以让该效果在任何场景下都能跑通。而一个合理的方案就是响应式设计。

响应式 —— 在CSS中，指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。

在响应式布局这个问题上，相对单位是CSS提供的工具之一。

2，em的使用分三种情况：

1，把各个方向的padding等的值设置为字号大小

设置padding、height、width或border-radius等属性

<style>
.padded {font-size: 16px;padding: 1em;
}
</style><body><div class='padded'>hahaha</div>
</body>

把padding赋值为1em，乘以字号，得到一个值为16px的padding渲染值。使用相对单位声明的值会由浏览器转化为一个绝对值，（称为计算值）。在这个例子里，将padding改为2em会生成一个32px的计算值。如果同一个元素的另一个选择器，用一个不一样的字号值去覆盖它，这会改变em在这个域下的基准值，那么padding的计算值也会相应变化。

在设置padding、height、width或border-radius等属性时，使用em可能会很方便，因为它们是以当前元素的字号大小作为基准值的。如果它们继承了不同的字号大小，或者用户更改了字体设置，这些属性会均匀地缩放。

如下面例子：

.box {padding: 1em;border-radius: 1em;background-color: lightgray;
}.box-small {font-size: 12px;
}.box-large {font-size: 18px;
}

使用样式：

<span class="box box-small">Small</span>
<span class="box box-large">Large</span>

效果如下：

2，对font-size 使用em

em是以当前元素的字号大小作为基准值的。但如果把一个元素的字号设为1.2em的时候表示什么？相对单位在该处的处理是：在font-size上的em会先从继承到的字号大小衍生出来。

举例：

<style>body {font-size: 16px;}.slogan {                  font-size: 1.2em;        }
</style>
<body>We love coffee<p class="slogan">We love coffee</p>
</body>

在<body>标签里面，声明字号为16px。在 .slogan中，该类继承父元素的字号大小。 slogan声明的字号大小是1.2em，此时：引用继承的字号16px，16 * 1.2 = 19.2，所以计算字号值是19.2px。效果如上图。

3，对font-size和padding等同时使用相对单位

这时候事情就变得有点不好控制了。。

举例：

body {font-size: 16px;
}.slogan {font-size: 1.2em;             padding: 1.2em;               background-color: #ccc;
}

此时 slogan中，font-size 的计算还是 16 x 1.2 = 19.2

但是，padding的计算是相对font-size 的，所以计算的结果是

1.2 x (16 x 1.2) = 23.04

这就很不好了，因为现在大家对padding的期待值也是19.2。尽管从原理上好理解，但是它非常不好用，不够直观，容易出错是最大的问题，也是大家不愿意使用em的原因之一。

为了解决这个问题，我们可以选择rem

3，rem

在HTML 中，根节点是文档里所有其他元素的祖先。它有一个特别的伪类选择器（:root），在样式表里可以用这个选择器表示。rem是根em（root em）的缩写。rem和根元素关联。不管你在文档中的什么地方使用rem，1.2rem的计算值都等于1.2倍的根元素的字号大小

:root {                    font-size: 1em;
}ul {font-size: .8rem;
}

1 伪类 :root 等价于 html 选择器
2 使用浏览器的默认字号大小（16px）

根元素的字号大小是浏览器的默认大小16px（根元素的1em等于浏览器的默认字号大小）。

ul的字号大小为0.8rem，计算结果是12.8px

rem简化了很多em带来的复杂度。事实上，rem是提供了一个介于px和em间的相对单位折中方案。那么，是不是意味着我们应该对所有元素都使用rem呢？当然不是。

在CSS的世界里，这个答案通常是：看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点就是，能够分辨在什么场景下该使用什么工具。我的选择是：

对font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而声明容器的宽度的话，我更喜欢使用百分比。

3.1，相对单位和响应式（一个例子）

<style>:root {                            font-size: 0.75em;               }                                  @media (min-width: 400px) {        :root {                          font-size: 0.875em;            }                                }                                  @media (min-width: 800px) {       :root {                          font-size: 1em;                }                                }.panel {padding: 1em;                    border-radius: 0.5em;            border: 1px solid #999;          }.panel > h2 {margin-top: 0;                   font-size: 0.8rem;               font-weight: bold;               text-transform: uppercase;       }
</style></head><body><div class="panel"><h2>Single-origin</h2><div class="panel-body">We have built partnerships with small farms around the world tohand-select beans at the peak of season. We then carefully roastin <a href="/batch-size">small batches</a> to maximize theirpotential.</div></div></body>

在上面的代码中，定义了三套根元素的font-size 尺寸，第一套样式规则，声明了小屏幕中的默认字号大小，这是在较小的屏幕上看到的大小。然后使用媒体查询，把400px和800px分别作为两个分水岭逐级增加字号的大小，覆盖掉默认的代码。

因此尽管你没有直接对这个面板做任何的修改，它现在是响应式的。在小屏幕上字号会被渲染成更小的（12px）。然后，在宽大于400px和大于800px的，字号会分别放大到14px和16px。

媒体查询（media query） —— 通过@media规则来声明样式，在不同的屏幕尺寸或者媒体类型（如打印机或显示器）下，触发对应的样式控制。这是响应式设计的关键要素。

参考链接：

如何更愉快的使用rem