CSS3 单位

px

像素单位 参照的媒介是计算机屏幕的分辨率。

<span style="font-size: 12px;"> o </span>
<span style="font-size: 13px;"> o </span>
<span style="font-size: 14px;"> o </span>
<span style="font-size: 15px;"> o </span>
<span style="font-size: 16px;"> o </span>
<span style="font-size: 17px;"> o </span>
<span style="font-size: 18px;"> o </span>

效果

%

百分比

<!-- chrome 浏览器字体的默认大小是 14px -->

<span style="font-size: 50%;"> 7px </span>
<span style="font-size: 100%;"> 14px </span>
<span style="font-size: 150%;"> 21px </span>

效果

em

相对单位 相对点是父类的字体大小。

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

效果

10px 15px 20px

rem

相对单位 相对点是网页的初始字体大小。

<style type="text/css">
* {
 font-size: 10px; <!-- 修改初始化字体 10px -->
}
</style>

<span style="font-size: 1rem"> 10px </span> <!-- 1 倍初始化字体大小 -->
<span style="font-size: 1.5rem"> 15px </span> <!-- 1.5 倍初始化字体大小 -->
<span style="font-size: 2rem"> 20px </span> <!-- 2 倍初始化字体大小 -->

效果

由于移动端的出现进入到了多屏的时代，相比于传统的 px 单位，em / rem 这些相对单位有更高的兼容性和更加灵活，当初始值变化，整个页面相关联的大小全部都会跟随变化。