区分rem和em

rem单位如何转换为像素值

当使用rem单位，他们转化为像素大小取决于页根元素的字体大小。即html元素的字体大小。根元素字体大小乘以rem值。

• 根元素(html) 字体大小为16px，10rem将等同于160px;

em单位如果转换为像素值

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

<div class="tenempadding"></div>


.tenempadding{
    font-size:18px;
    padding:10em;
}

以上的10em为180px

重点

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

总结rem与em差异

• rem 单位翻译为像素值是由html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
• em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。