DPI/pt/px 单位的含义

DPI(Dots Per Inch)

每英寸像素数。Windows 系统默认是 96dpi，Apple 系统默认是 72dpi。

pt (point，磅)

是一个物理长度单位，指的是 72 分之一英寸。

px (pixel，像素)

一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI，在扫描打印时一般都有 DPI 可选。常见浏览器的默认字体大小都是 16px。

由于屏幕大小的差异性，相同大小的字体在不同屏幕下显示的效果差异比较大。那么动态的放大/缩小字体就变得比较重要。显然针对每一处的字体设置都去做兼容是复杂的，于是就有了后面的 em 和 rem。

em (相对长度)

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

由于浏览器的默认字体大小是 16px，所以未经调整默认字体大小的浏览器都符合: 1em = 16px。

em 会继承父级元素的字体大小。由此，只需要改变父元素的字体大小，就可以同步放大或缩小子元素的字体。

但是也因此需要注意几点：

1、body 选择器中声明 Font-size=62.5% (10 ÷ 16 × 100% = 62.5%)；

2、将你的原来的 px 数值除以 10，然后换上 em 作为单位；

3、重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。

rem (font size of the root element)

由于 em 存在对父元素继承的问题，当改变字体大小时涉及的继承关系就变得复杂起来。

rem 是相对于根元素 字体尺寸的大小。如 文本大小设为 font-size: 10px，则 1rem = 10px。使用 rem 设置字体则简单了很多。

px 与 pt 的换算

px = pt * DPI / 72

像素与毫米的转换

象素数 / DPI = 英寸数
英寸数 * 25.4 = 毫米数

一英寸等于25.4mm。那么毫米换算成像素的公式为：

水平方向的换算： x * px /25.4
垂直方向的换算： y * py /25.4
像素换算为毫米： x * 25.4 / px

pt/px/em/percent 换算参考

以 Windows 下的 96dpi 作参考，则有：pt = px72/96 = px3/4。
再考虑浏览器的默认字体大小是 16px，我们可以得到如下的换算参考：

Points   Pixels   Em        Percent
6pt      8px      0.5em     50%
7pt      9px      0.55em    55%
7.5pt    10px     0.625em   62.5%
8pt      11px     0.7em     70%
9pt      12px     0.75em    75%
10pt     13px     0.8em     80%
10.5pt   14px     0.875em   87.5%
11pt     15px     0.95em    95%
12pt     16px     1em       100%
13pt     17px     1.05em    105%
13.5pt   18px     1.125em   112.5%
14pt     19px     1.2em     120%
14.5pt   20px     1.25em    125%
15pt     21px     1.3em     130%
16pt     22px     1.4em     140%
17pt     23px     1.45em    145%
18pt     24px     1.5em     150%
20pt     26px     1.6em     160%
22pt     29px     1.8em     180%
24pt     32px     2em       200%
26pt     35px     2.2em     220%
27pt     36px     2.25em    225%
28pt     37px     2.3em     230%
29pt     38px     2.35em    235%
30pt     40px     2.45em    245%
32pt     42px     2.55em    255%
34pt     45px     2.75em    275%
36pt     48px     3em       300%

一个经典的简单示例：

html {font-size: 62.5%;  /*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem; /*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;  /*2.4 × 10px = 24px*/}