CSS中的rem单位

px可能是我们在最经常用到的一个css单位，有时也可能会用到em这个单位。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px的长度不是绝对的，我们可以试着设置一个固定的px长度，然后改变分辨率，便可以看出一些差别。当然用户也是可以直接在浏览器里调节字体的大小。

浏览器的默认渲染的文字大小是16px，等于1em，所以未经过调整字体的浏览器都有16px= 1em这个关系存在。

em

em的值并不是固定的，他会继承父元素的字体大小。

.box{font-size:24px;}
span{font-size:1em;}

<div class="box">
    <span>你好</span>
</div>
&nbsp;
<span>世界</span>

我们可以在浏览器中看下，发现‘世界’的字体大小是16px，而‘你好’的字体大小则是24px。因此div.class中的后代元素的em则都是相对与24px来计算的。

rem

W3C官网描述是“font size of the root element”，即rem是相对于根元素。（IE9+）所以我们只要将根元素设置为一个参考值就行了。 所以我们可以采用以下方法，

html{
    font-size: 62.5%;
    /*16 * 0.625 = 10px*/
}
p {
    font-size: 1.2rem;
    /*10 * 1.2 = 12px*/
}
span {
    font-size: 1.4em;
    /*10 * 14 = 14px*/
}

这样我们也可以向使用px一样使用rem了，当然rem在移动端的布局是有很大的优势的。

注：chrome下最小字体为12px。