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

原文:https://lzw.me/a/pt-px-em-rem.html