简介
当涉及到css中的单位时，我们有很多很好的选择。在当今响应式设计的世界中，像em或rem单位这样的相对单位为我们提供了开箱即用的适应性和灵活性，允许大小基于标记中更高级别定义的字体大小(S)。
您可能已经使用em和rem单位有一段时间了，但您可能想知道两者之间的确切区别以及哪种单位更适合您的用例。让我们尽可能简短地分解它。
<$>[注意]摘要： Font-Size属性的em单位将相对于父元素的Font-Size。除字体大小以外的其他属性上的EM单位将相对于当前元素的字体大小。REM单位大小始终与根html元素的字体大小相关。<$>
- 以单位计
EM是从Typograph world，借用来的，它是一个允许相对于其父元素的字体大小设置元素的字体大小的单位。
让我们举一个简单的例子：
1.parent {
2 font-size: 18px;
3}
4.child {
5 font-size: 1.5em;
6}
在该示例中，子对象的字体大小为27px (1.5* 18px=27px)。
如果父元素没有为Font-Size指定值，则将在DOM树中更高的位置查找值。如果一直到根元素(<html>)都没有指定字体大小，则使用浏览器默认的16px 。
非常简单和直截了当，对吗？然而，EM单位不仅可以用于设置字体大小，而且几乎可以在任何需要使用单位的地方使用(填充、边距、宽度、高度、最大宽度，……你可以看到图片！)当在除Font-Size之外的其他属性上使用em单位时，该值相对于元素自己的Font-Size。
让我们在我们的示例中添加以下内容：
1.parent {
2 font-size: 18px;
3}
4.child {
5 font-size: 1.5em;
6 padding: 2em 1em;
7}
.Child的上下填充为 54px** 。这是当前元素字体大小的2倍(** 2* ** 27px** ).Child左右填充为 27px** 。这是我们元素的字体大小的1倍。
<$>[注意]记住：当在Font-Size上使用em单位时，大小与父级的字体大小相关。当在其他属性上使用时，它相对于元素本身的字体大小。<$>
复合效果：天堂的烦恼
到目前为止，使用em单元一切都很好，但这个单元可以从一个级别合成到另一个级别，这可能会出现问题。
让我们保留一个类似的基本示例：
1.parent {
2 font-size: 15px;
3}
4.child {
5 font-size: 2em;
6}
但让我们在标记中使用它，如下所示：
1<div class="parent">
2 I'm 15px
3 <div class="child">
4 I'm 30px, as expected
5 <div class="child">
6 I'm 60px, trouble starts!
7 <div class="child">
8 I'm 120px, now we're really in trouble!
9 </div>
10 </div>
11 </div>
12</div>
因此，正如您所看到的，当多个em-字体大小的元素相互包含时，em单位的效果可能会变得复杂。这可能会成为问题，并可能在设计中导致意想不到的后果。
这个问题就是创建rem单位的原因。
刹车单元
Rem单位(根em的缩写)是一个相对单位，它将始终基于根元素的字体大小值，即<html>元素。如果<html>元素没有指定的字体大小，则使用浏览器默认的16px 。
这意味着，通过使用rem单位，父元素的值被忽略，而只考虑根的值。
有一个类似的例子，但在rem中：
1.html {
2 font-size: 16px;
3}
4.parent {
5 font-size: 15px;
6}
7.child-rem {
8 font-size: 2rem;
9}
1<div class="parent">
2 I'm 15px
3 <div class="child-rem">
4 I'm 32px, as expected
5 <div class="child-rem">
6 I'm 32px, yep!
7 <div class="child-rem">
8 I'm 32px, like clockwork!
9 </div>
10 </div>
11 </div>
12</div>
如你所见，使用rem单位可以让我们避免em单位的复合效果。对于rem，事情总是一致地基于字体大小或根元素，所以没有什么奇怪的。
除字体大小以外的其他值也是如此(边距、填充...)在这些元素上使用rem单位仍然是相对于根元素的字体大小。
em和rem，哪个更好？
真的没有更好的单位了，这完全取决于你的个人喜好。有些人喜欢用雷姆单位来设计一切，以求一致性和可预测性，而另一些人则喜欢在受到附近父元素影响的地方也使用雷姆单位。