CSS中的rem单位

2016年11月11日Web前端0

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。

目录