CSS单位em和rem

写过样式的都知道CSS是有单位的，想要写出还原设计稿的完美样式，离不开好的单位。现在CSS的单位有%、in、cm、mm、em、ex、pt、pc、px等原生单位，现在更有了rem、vh、vw、vmin、vmax等单位。

一般开发用px比较多，现在开发移动端rem用的也比较多，在这边就不讨论vh和vw与rem的比较。今天只说说em和rem具体的显示单位。

应该很多都知道rem是根据HTML元素设置的字体大小来定义单位，em是根据父元素设置的字体大小来设置，但是很多没有真的搞清楚这两个单位对应px单位到底是怎么对应的。

html{
    font-size: 20px;
}
<div style="width: 5rem;height: 5rem;background: red;">
    <p style="font-size: 1rem">这是em单位<p>
</div>

当我们设置HTML字体大小为20px的时候，相当于1rem=20px，此时div的宽高就是100px，字体大小就是20px,当我们改变HTML字体大小的时候，div和字体大小也会跟着变。可以自己写一下这样的代码，很容易就知道rem是怎么换算的。

根据这个特性，我们就可以动态的设置HTML的字体大小，来自适应不同手机分辨率，当然，最好我们设置成能整十整百的计算，好比1rem=100px，而不是1rem=75px，这样方便写样式的时候计算。如果你觉得采用vs或者是sublime能有插件帮忙换算，那就当我没说。当然，现在的很多标注软件比如蓝湖和PXCooke也能帮你计算。

PC端最好不要使用rem，因为像Chrome最小字体单位是12px，可是默认大小是16px，不同浏览器会有不同的默认单位或者是最小字体单位，所以PC最好不要使用rem单位。

Em就相对复杂一点，em单位的解释是根据父元素。当我们没有设置字体大小的时候

<p style="font-size: 1em">这是em单位<p>

默认的是浏览器默认字体大小，Chrome是16px。

当我们设置字体大小

<div style="width: 500px;height: 500px;background: red;font-size: 30px">
    <p style="font-size: 1em">这是em单位<p>
</div>

这时候字体就是30px。而且，当我们设置了div字体大小的时候，宽高使用em单位

<div style="width: 5em;height: 5em;background: red;font-size: 30px">
    <p style="font-size: 1em">这是em单位<p>
</div>

这时候div宽高分别是150px。

当我们再嵌套一个div的时候

<div style="width: 5em;height: 5em;background: red;font-size: 30px">
    <div style="font-size: 20px;width: 3em;height: 3em;background: blue;">
        <p style="font-size: 1em">这是em单位<p>
    </div>
</div>

这时候p的字体大小就是20px，而且给这个div加宽高，也会根据20px来换算。

Em单位是优先根据自身的字体大小，如果没有就向上寻找最近父元素有设置字体大小来换算的。其实只要写一写上面的代码然后看一看浏览器显示的大小就很容易知道em和rem是根据上面来换算。

（完）