制作网页时首先遇到的经常就是各种长度单位的问题,现在总结一下。
点(point),有时翻译为磅,简写为pt,是绝对长度的单位,规定1英寸等于72点,即1in = 72pt。
像素(pixel),简写为px,经常说的屏幕分辨率就是用这个单位来衡量的。px 是相对长度的单位,实际的长度由下面的 DPI 决定。
DPI(dots per inch)或者 PPI(pixels per inch),每英寸的像素数目,即 1in = DPI px。DPI 可以在操作系统里设置,在 Windows 中默认 DPI 为96,也可以改为 120,在 MacOS 中默认 DPI 为 72。
因此我们就有 1px = 1pt * DPI / 72 这个换算公式。例如,在使用 Windows 默认的 96 DPI 时,12px = 9pt。
在网页中还经常使用em这个单位,它最初是指字母M的宽度,现在默认为1em = 16px。em 和 px 的一个区别在于,1em 的长度是可以调整的,例如在 CSS 中指定 body {font-size: 75%},则 1em 的长度就变成 12px。em 和 px 的另一个区别在于,em 会继承父级元素的字体大小。
另外还有 ex 这个长度单位,它指的是字母x的高度。ex 和 px 的换算关系与具体的浏览器以及字体有关,不够稳定,因此很少人使用它。
参考资料:
[1] px-em-pt-%-keyword
[2] Point (typography)
[3] Em (typography)