CSS3 单位

px

在移动端兴起之前，一直使用的都是px这个单位，现在也是很常用。px是按显示器的像素计算大小，是绝对单位。

<p style="font-size: 12px;">12px</p>
<p style="font-size: 13px;">13px</p>
<p style="font-size: 14px;">14px</p>

效果

12px

13px

14px

%

百分比

<p style="font-size: 50%">7px</p>
<p style="font-size: 100%">14px</p>

浏览器会给我们字体一个初始值，chrome浏览器给的这个值是14px。所以50%即7px。相对于原始值进行伸缩。

效果

7px

14px

em

以父类字体大小为基准。是相对单位。

<div style="font-size: 10px;">
 <p style="font-size: 1em">10px</p> <!-- 1 倍父亲字体的大小 -->
 <p style="font-size: 1.5em">15px</p> <!-- 1.5 倍父亲字体的大小 -->
 <p style="font-size: 2em">20px</p> <!-- 2 倍父亲字体的大小 -->
</div>

效果

rem

以初始字体大小为基准。也是相对单位。关于初始字体，上面已经列举过，chrome=14px。

<p style="font-size: 1rem">14px</p> <!-- 1 倍初始化字体的大小 -->
<p style="font-size: 1.5rem">21px</p> <!-- 1.5 倍初始化字体的大小 -->
<p style="font-size: 2rem">28px</p> <!-- 2 倍初始化字体的大小 -->

效果

14px>

21px

28px

修改初始字体

* {
 font-size: 10px; <!-- 设置所有字体默认为10px -->
}

如果我们需要，可以通过这种形式修改，统一所有浏览器下面的初始字体大小。

这几种单位，最简单粗暴的还是px，因为移动的兴起，有了更多的千奇百怪的屏幕，所以有时我们可能需要根据不同的屏幕，相对的设置大小。这是em、rem的作用。相对单位的另一个好处就是，我们变化了初始值大小，整个页面相关联的大小全部都会跟随变化。