pt与px、em、rem的区别与换算
DPI/pt/px 单位的含义 DPI(Dots Per Inch) 每英寸像素数。
¶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 = px_72/96 = px_3/4。
再考虑浏览器的默认字体大小是 16px，我们可以得到如下的换算参考：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*/
}