介绍
当谈到 CSS 中的单位时，我们有很多不错的选择。在当今响应式设计的世界中，像em或rem单位这样的相对单位为我们提供了开箱即用的适应性和灵活性，允许大小基于标记中定义的更高的字体大小。
您现在可能已经使用em和rem单位一段时间了，但您可能想知道两者之间的确切区别以及哪个单位更适合您的用例。让我们尽可能简短地分解它。
总结： 字体大小属性的em单位将相对于父元素的字体大小。除了 font-size 之外的其他属性上的em单位将与当前元素的 font-size 相关。rem单位大小总是相对于根html元素的字体大小。
em 单位
EM从借用排版世界，并且它是一个单元，其允许设置字体大小相对于所述元件的字体大小其父。
让我们以这个简单的例子为例：
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em;
}
在这个例子中，孩子的字体大小为27px (1.5 * 18px = 27px)。
如果父元素没有为font-size指定值，则将在 DOM 树中查找更高的值。如果一直到根元素 ( )都没有指定字体大小<html>，则使用浏览器默认值16px。
非常简单直接，对吗？em单位不仅可以用于设置字体大小，而且它们几乎可以用于任何需要单位的地方（填充、边距、宽度、高度、最大宽度……你懂的！）当em单位用于除font-size之外的其他属性，该值相对于元素自己的font-size。
让我们添加到我们的示例中：
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em;
padding: 2em 1em;
}
- 顶部和底部的填充
.child将为54px。这是我们当前元素字体大小 ( 2 * 27px )的 2 倍 - 左右边距
.child为27px。这是我们元素字体大小的 1 倍。
请记住：当 em 单位用于font-size 时，大小是相对于父级的 font-size 的。当用于其他属性时，它与元素本身的字体大小有关。
复合效应：天堂的麻烦
到目前为止，使用em单位一切都很好，但是由于单位可以从一个级别复合到另一个级别，因此可能会出现问题。
让我们保留一个类似的基本示例：
.parent {
font-size: 15px;
}
.child {
font-size: 2em;
}
但是让我们像这样在我们的标记中使用它：
<div class="parent">
I'm 15px
<div class="child">
I'm 30px, as expected
<div class="child">
I'm 60px, trouble starts!
<div class="child">
I'm 120px, now we're really in trouble!
</div>
</div>
</div>
</div>
因此，如您所见，当多个 em-font-sized 元素彼此之间时，em单位的效果可能会复合。这可能会成为一个问题，并可能导致您的设计出现意想不到的后果。
这个问题就是创建rem单元的原因。
物件单位
的REM单元，用于短根EM是永远以其为依据的相对单位字体大小的根元素，这是有价值的<html>元件。如果<html>元素没有指定的字体大小，则使用浏览器默认值16px。
所以这意味着，通过使用rem单位，父元素的值被忽略，只考虑根的值。
有一个类似的例子，但在 rem 中：
.html {
font-size: 16px;
}
.parent {
font-size: 15px;
}
.child-rem {
font-size: 2rem;
}
<div class="parent">
I'm 15px
<div class="child-rem">
I'm 32px, as expected
<div class="child-rem">
I'm 32px, yep!
<div class="child-rem">
I'm 32px, like clockwork!
</div>
</div>
</div>
</div>
我是15px
正如预期的那样，我是 32px
我是 32px，是的！
我是 32px，像发条一样！
如您所见，使用rem单位可以避免em单位的复合效应。使用rem 时，事情总是始终基于字体大小或根元素，因此没有任何意外。
对于字体大小以外的其他值（边距、填充等）也是如此，在这些值上使用rem单位仍然是相对于根元素的字体大小。
em vs rem，哪个更好？
真的没有更好的单位，这完全取决于您的个人喜好。有些人喜欢以rem单位设计一切以保持一致性和可预测性，而另一些人也喜欢在附近父元素的影响有意义的地方使用em单位。
