rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
它相对于根元素<html>，
一般的，各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。
为了更方便的进行换算（比如1：10），就可以加样式：
10/16=62.5%
html,body{
font-size: 62.5%;
}
（1:20） 20/16=125%
html,body{
font-size: 125%;
}
例如UI给的字体大小为14px
我想得到这14px等于多少rem 14如果是默认16px 14/16=0.875rem
em 单位如何转换为像素值
当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。
例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。
em
CSS padding设置为 10em
px
计算到 180px (或接近它)
Em 单位的遗传效果
使用 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 单位。
rem 与 em 区别
- rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
- em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
网友评论