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%

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*/}

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*/}