em，rem区别比较

rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定。

注意：不少人错误觉得em是根据父类元素，其实是使用它的元素继承了父类元素的属性才会产生的错觉。

 

主要区别

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差别是决定什么时候使用哪一个单元的关键。

 

rem单位如何转换为像素值

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

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

 

em单位如何转换为像素值

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

例如，若是一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

 

重点理解：

有一个比较广泛的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。·

父元素的字体大小能够影响 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 已经变小了。 它不受父元素的字体大小。

因为存在着这些隐患，你能够看到为何必须知道如何正确管理使用 em 单位。

 

浏览器设置HTML元素字体大小的影响

每一个浏览器都有默认的字体大小，若是你没有本身重写根html元素的字体大小，而后后面直接用em或rem的形式表达，那么每一个浏览器的样式都不同。

 

建议

em用于非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。

rem用于设置元素的字体大小

 

文章参考

http://caibaojian.com/rem-vs-em.html