前台开发入门到实战：CSS中字体单位：px、em、rem和%

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具备重要性，在CSS3普及以来，更支持了少量方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。

“网页”和“印刷”的单位
若要把单位做区隔，最简单可以分为“网页”和“印刷”两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向透过排版软件来进行设计。

网页（单位）

• px：绝对单位，代表屏幕中每个「点」（pixel）。
• em：相对单位，每个子元素透过「倍数」乘以父元素的px值。
• rem：相对单位，每个元素透过「倍数」乘以根元素的px值。
• %：相对单位，每个子元素透过「百分比」乘以父元素的px值。

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前台工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前台全栈学习圈：784783012 欢迎大家进群交流探讨，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终白费大量时间，所以有效资源还是很有必要的。

网页（属性名称）

• medium：于16px（h4预设值）
• xx-small:medium的0.6倍（h6预设值）
• x-small:medium的0.75倍
• small:medium的0.8倍（h5预设值，W3C定义为0.89，实测约为0.8）
• large:medium的1.1倍（h3预设值，W3C定义为1.2，实测约为1.1）
• x-large:medium的1.5倍（h2预设值）
• xx-large:medium的2倍（h1预设值）
• smaller：约为父层的80%
• larger：约为父层的120%

印刷

• pt：打印机的每个「点」，定义为1 pt＝1/72 in，假如在72 dpi的系统上1 px = 1 pt，但假如在96dpi的系统上1 px = 0.75 pt（72/96 = 0.75）。
• in：英寸，在96 dpi的系统上1 in = 96 px。
• cm：厘米，在96 dpi的系统上1 cm = 37.795275593333 px。
• mm：毫米，在96 dpi的系统上1 cm = 3.7795275593333 px。

示例展现
以下将展现四种不同单位的示例，为公平起见，四个示例都套用预设的div格式，纯粹改变font-size看看有何不同，因为子元素若没有设定font-size，会自动继承父元素的font-size，使用上就应该要预先初始化字体大小，下面这两段CSS可以将所有的元素字体大小预设为16px，而后可个别进行调整。

html{    font-size:16px;}html * {    font-size: 1rem;}

1. px
px是绝对单位，因而只需设定多少px，就会准确的呈现，对于少量讲求精准位置的排版而言十分有用，如示例表示的，指定多大px字体就会多大。

<div style="font-size:16px;">16px    <div style="font-size:20px;">20px        <div style="font-size:24px;">24px            <div style="font-size:16px;">16px                <div style="font-size:32px;">32px</div>            </div>        </div>    </div></div>

2. em
em是相对单位，为每个子元素透过“倍数”乘以父元素的px值，假如我们每一层div都使用1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。（浏览器预设字体大小为16px，若无特别指定则会直接继承父元素字体大小）

<div style="font-size:1.2em;">1.2em    <div style="font-size:1.2em;">1.2em        <div style="font-size:1.2em;">1.2em            <div style="font-size:1.2em;">1.2em                <div style="font-size:1.2em;">1.2em</div>            </div>        </div>    </div></div>

3. rem
rem是相对单位，为每个元素透过“倍数”乘以根元素的px值，假如我们每一层div都使用1.2rem，最内层就会是16px x 1.2 = 19.2px。（根元素指的是html的font-size，预设为16px）

<div style="font-size:1.2rem;">1.2rem    <div style="font-size:1.2rem;">1.2rem        <div style="font-size:1.2rem;">1.2rem            <div style="font-size:1.2rem;">1.2rem                <div style="font-size:1.2rem;">1.2rem</div>            </div>        </div>    </div></div>

4. %
%百分比是相对单位，和em大同小异，简单来说em就是百分比除以一百，假如我们每一层div都使用120%，就等同于1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。

<div style="font-size:120%;">120%    <div style="font-size:120%;">120%        <div style="font-size:120%;">120%            <div style="font-size:120%;">120%                <div style="font-size:120%;">120%</div>            </div>        </div>    </div></div>

5.small、medium、large…等
字体大小的属性有七种，分别是xx-small、x-small、small、medium、large、x-large和xx-large，除了x-small，其他六种分别对应h6~h1的标签文字大小，根据W3C的规范，以medium预设16px为基础（若html字体预设大小改变，medium也会跟着变），使用固定的百分比乘以medium的大小，例如ss-small预设为16px x 0.6 = 9.6px（浏览器显示为12px）。

<div style="font-size:xx-small;">xx-small    <div style="font-size:x-small;">x-small        <div style="font-size:small;">small            <div style="font-size:medium;">medium                <div style="font-size:large;">large                    <div style="font-size:x-large;">x-large                        <div style="font-size:xx-large;">xx-large</div>                    </div>                </div>            </div>        </div>    </div></div>

6. larger、smaller
larger和smaller就是固定百分比为单位，larger为父层的120%，smaller为父层的80%。

<div style="font-size:medium;">medium  <div style="font-size:larger;">larger    <div style="font-size:larger;">larger      <div style="font-size:larger;">larger        <div style="font-size:smaller;">smaller          <div style="font-size:smaller;">smaller            <div style="font-size:smaller;">smaller</div>          </div>        </div>      </div>    </div>  </div></div>

小结
熟习了字体大小单位之后，就更能有系统的设计整个网站的CSS构架，不过font-size本身和font-family有着少量复杂的关系，不同的font-family有时也会影响font-size的设定，因而使用上还是得略微注意一下啰！