前端开发入门到实战：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