rem和em的用法

一、rem转化为向素值的方法

rem单位转化为像素大小取决于根元素的字体大小，即HTML元素的字体大小，根元素字体大小乘以rem。

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

二、em单位如何转化为像素值

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

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

3.总结

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算获得的像素值。

em 单位基于使用他们的元素的字体大小。

rem 单位基于 html 元素的字体大小。

em 单位可能受任何继承的父元素字体大小影响

rem 单位能够从浏览器字体设置中继承字体大小。

使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

在不须要使用em单位，而且须要根据浏览器的字体大小设置缩放的状况下使用rem。

使用rem单位，除非你肯定你须要 em 单位，包括对字体大小。

媒体查询中使用 rem 单位

不要在多列布局中使用 em 或 rem -改用 %。

不要使用 em 或 rem，若是缩放会不可避免地致使要打破布局元素。