探究px像素与pt磅,mm毫米之间的换算

文章目录

DPI(dots per inch)
dpcm（dots per centimeter）
dppx（dots per px 别名为：x）
px像素(Pixel)
em
rem (font size of the root element)
in英寸(Inch)
pt磅(Point)
mm毫米(Millimeter)
cm厘米(Centimeter)
pt与px换算公式
mm与px换算公式

像素作为图像的一种尺寸，只存在于电脑中，如同RGB色彩模式一样只存在于电脑中。像素是一种虚拟的单位，现实生活中是没有像素这个单位的。
在现实中我们看到一个人，你能说他有多少像素高吗？不能，通常我们会说他有1.82米高，或者182厘米等。所用的都是传统长度单位。传统长度单位就是指毫米、厘米、分米、米、公里、光年等单位。

DPI(dots per inch)

每英寸点数。在扫描打印时一般都有DPI可选。Windows 系统默认是 96dpi，Apple 系统默认是 72dpi。

dpcm（dots per centimeter）

表示每厘米的点数。因为 1 英寸是 2.54 厘米，所以 1dpcm ≈ 2.54dpi

dppx（dots per px 别名为：x）

表示每 px 单位的点数。对应window.devicePixelRatio值。

px像素(Pixel)

相对长度单位。是一个虚拟的长度单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

em

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

em是相对长度单位。相对于当前对象内文本的字体尺寸。

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

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

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

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

body 选择器中声明 Font-size=62.5% (10 ÷ 16 × 100% = 62.5%)；
将你的原来的 px 数值除以 10，然后换上 em 作为单位；
重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。

rem (font size of the root element)

由于 em 存在对父元素继承的问题，当改变字体大小时涉及的继承关系就变得复杂起来。
rem 是相对于根元素字体尺寸的大小。如文本大小设为 font-size: 10px，则 1rem = 10px。使用 rem 设置字体则简单了很多。

in英寸(Inch)

绝对长度单位。

pt磅(Point)

绝对长度单位。是一个物理长度单位，指的是72分之一英寸。
1in = 72pt

mm毫米(Millimeter)

绝对长度单位。
1in = 25.4 mm = 72pt

cm厘米(Centimeter)

绝对长度单位。
1in = 2.54cm = 72pt

pt与px换算公式

pt和px的换算公式可以根据pt的定义得出:
pt = 1/72(英寸), px = 1/dpi(英寸)
因此 pt = px * dpi / 72
以 Windows 下的 96dpi 来计算
pt = px * 96/72 = px * 4/3 = px * 1.33
基本上 1pt 约等于 1.33像素

mm与px换算公式

由pt = px * dpi / 72
则又知道1in = 25.4mm = 72pt
则25.4mm/72 = px * dpi / 72
得mm = px * dpi / 25.4
以 Windows 下的 96dpi 来计算
mm = px * 96 / 25.4
mm = px * 3.78
基本上 1毫米约等于 3.78像素