CSS 字体大小中的 em 与 rem 的区别

呃

rem

呃

以这段 HTML 代码为例：

<div id="outer">
    <h1 class="heading">Outer heading</h1>

    <div id="inner">
        <h1 class="heading">Inner heading</h1>
    </div>
</div>

以及以下 CSS 代码：

#outer { font-size: 30px; }
#inner { font-size: 20px; }
.heading { font-size: 3em; }

结果如下：

如果在开发者工具中检查标题，切换到计算标签，会发现外层标题的字体大小为 90px，内层标题的字体大小为 60px。

这是因为 `em` 元素的大小取决于其父元素的字体大小。
如果我没有为 `#inner` 指定字体大小，那么这两个标题的大小就会相同。

rem

rem 单位略有不同。让我们把 .heading 的字体大小单位从 em 改为 rem：

.heading { font-size: 3rem; }

现在两个标题的字号相同：

rem 属性的值并不基于元素的父元素的字体大小，而是基于根元素（即 html 元素）的字体大小。

如果您没有为 html 指定字体大小，则在大多数浏览器中默认值为 16px。

我在开发者工具中检查标题，切换到计算制表符，标题的字体大小为 48 (16 * 3)。