文章目录
像素作为图像的一种尺寸,只存在于电脑中,如同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像素