对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。
“网页”和“印刷”的单位
若要把单位做区隔,最简单可以分为“网页”和“印刷”两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计。
网页(单位)
- px:绝对单位,代表屏幕中每个「点」(pixel)。
- em:相对单位,每个子元素透过「倍数」乘以父元素的px值。
- rem:相对单位,每个元素透过「倍数」乘以根元素的px值。
- %:相对单位,每个子元素透过「百分比」乘以父元素的px值。
网页(属性名称)
- 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