em VS rem

在 CSS 和尺寸设置领域，有多种单位可用于字体大小、边距、内边距等等。

rem和em是两个常用但容易混淆的单位。它们都是相对CSS 单位（它们的大小取决于其他因素）。那么，这两个单位有什么区别呢？

呃

该单元会继承与其最近的、具有字体大小设置的父元素的字体大小。我将使用图示来解释这种继承机制。

在上图中，根元素的字体大小为 36px。作为根元素子元素的 body 元素的字体大小为 0.8em，这相当于根元素字体大小的 80%，即 (0.8 * 36px = 28.8)，以此类推。如果直接父元素没有设置字体大小，则会查找已设置字体大小的父元素。

rem

该单元继承根元素的字体大小。您可以将其视为根元素的em属性。在这种情况下，它继承的是 html 元素的字体大小，而不是其直接元素的字体大小。

在这里，无论元素嵌套多深，它总能找到回家的路😀😀……在这种情况下，就是根元素。

这里有一个 Codepen 演示，展示了 em 和 rem 的实际应用。

结论

这只是对 em 和 rem 的简要介绍，选择哪一个完全取决于你。使用em，你可以为不同的部分设置不同的字体大小。而使用rem，你可以使用一个中央控制器来控制 HTML 中其他元素的大小。