CSS单位EM和REM

em 和 rem

em和rem是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.234em”。“相对”的意思是：

相对的计算必然会一个参考物，那么这里相对所指的是相对于相对于使用em单位的元素的font-size。比如：如果在一个div中设置字体大小为“16px”，此时这个div的后代元素将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为0.75em，那么其字体大小计算出来后就相当于0.75 X 16px = 12px；
如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小），不至于用户改变了浏览器的字体后会致使整个页面崩溃。

也就是说em 和 rem都是灵活、可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。如果你使用值 1em 或 1rem，它可以被浏览器翻译成从16px到 160px 或其他任意值。

em 和 rem 单位提供的这种灵活性和工作方式都很相似，所以最大的问题是，我们何时应使用 em 值，何时应使用 rem 值呢

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值。

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。根元素字体大小乘以你 rem 值。
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。
例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。事实上，根据W3标准，它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。让我们看看为什么以及如何起作用。

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。继承效果只能被明确的字体单位覆盖，比如px,vw。

使用 em 单位的元素字体大小根据它们来定。但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。因此padding会翻译成 24px，即 1.5 x 16 = 24。

如果我们加多一个div来包裹原先的div，然后设置其字体大小为 1.25em呢?

我们包裹的 div 继承根元素字体大小 16px ，并乘以它自己的 1.25em 的字体大小。这将设置包裹 div 字体大小为 20px，即 1.25 x 16 = 20。

现在我们原始的 div 不再直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值现在等于 30px，即 1.5 x 20 = 30。

这个继承效应可以更复杂，如果我们向我们原始的 div 添加 em 字体单位，比方说 1.2em。

Div 从其父级继承 20px 字体大小，然后，乘以它自己的 1.2em 设置，给它 24px，即 1.2 × 20 = 24 新字体大小。

div上的1.5em padding 现在将再次改变大小，用新的字体大小，36px，即 1.5 × 24 = 36 。

最后，为了进一步说明那个 em 单位是相对于他们最终获得(不是父元素)的字体大小，让我们来看看设置padding 1.5em 如果我们显式设置 div 使用 14px值，不继承字体大小会发生什么。

现在，我们的padding为 21px，即 1.5 x 14 = 21 已经变小。它不受父元素的字体大小。

根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是直接确定 rem值，但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。

确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。

em 单位取决于一个font-size值而非 html 元素的字体大小。
em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。根据某个元素的字体大小做缩放而不是根元素的字体大小。