「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

CSS 中的 em 和 rem

前言

rem和em是CSS中的相对单位，经常使用于响应式布局。em 和 rem 可能会给一些初学者带来疑惑，不知道如何正确选择单位，这次我们来学习一下em和rem具体使用方法。

什么是em

em 的值等于该元素的父级元素的计算字体大小，比如父级元素的fontSize 为20px，那么子元素的1em 等于 20px。

如果父元素中未指定字体大小，它会将继续向上查找，直到根元素。根元素的字体大小是由浏览器提供，默认状态是16px。在这种情况下，1em等于16px。

em 的计算

我们通过一个例子，来了解em是如何工作的。

我们有三个 div 分别是 container、parent和child，他们的 fontSize 分别为1em、3em和2em，那么子元素child计算后的实际像素会是多少。

<style>
.container { font-size: 1em; }
.parent { font-size: 3em; }
.child { font-size: 2em; }
</style>
<div class="container">container
  <div class="parent">parent
    <div class="child">
      子元素节点
    </div>
  </div>
</div>

要想知道 child 的大小，我们需要一级一级计算。

因为根元素没有设置fontSize 所以 container 的 fontSize 为 1em等于16px。
parent 元素的fontSize 相对于 container ，所以 3em 等于 3 * 16px = 48px。
最后child 元素的fontSize 则相对于 parent，所以 2em 等于 2 * 48px = 96px。

结果：

什么是rem

em 是相对于直接和最近的父级，而 rem 永远只相对于 HTML 节点的 fontSize，默认情况下如果没有设置 HTML 元素的fontSize ，则1rem 等于 16px。

默认情况下，如果我们要使用 10px ，那么我们应该设置 1rem 等于 0.625rem，这样我们需要其他尺寸时计算就会比较麻烦。所以我们可以把 HTML 元素设置成 62.5%，这样的话 1rem 就会等于 10px，这样当我们需要其他大小，就能很容易的口算出来。

选择那种比较好

既然存在这两种单位，那说明在一些情况都会有其更方便的点。所以没有最好的单位，只有合适的单位。rem 的优点在于如果层级复杂的情况，我们可以比较方便的计算出需要的大小，而不需要先去查找父级元素的字体大小。当我们的父级比较多时 em 会变得比较麻烦，一不注意就会被改变。