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>

效果

10px

15px

20px


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,因为移动的兴起,有了更多的千奇百怪的屏幕,所以有时我们可能需要根据不同的屏幕,相对的设置大小。这是emrem的作用。相对单位的另一个好处就是,我们变化了初始值大小,整个页面相关联的大小全部都会跟随变化。

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程