CSS 像素探讨
物理像素与独立像素
px 像素(Pixel),相对长度单位。本来 px 还是很好理解的,但是由于 Retina 屏让 px 变得扑所迷离,也是在移动端 Web 开发的时候不得不跨越的一个坎。我们先了解一下两个概念:
- 物理像素(实际像素):即小格子,是各个厂家所宣称的屏幕分辨率,比如:2880x1800,Retina 屏所说的像素就是物理实际像素。
- 独立像素:即大格子,是 JS/CSS 所认为的像素
- 非 Retina 屏
独立像素 = 物理像素
- Retina 屏
独立像素 < 物理像素
- 非 Retina 屏
打开 Chrome 的控制台,切换到移动端设备模式,红色箭头所代表的就是独立像素:

dpr
dpr(device pixel ratio) 即像素比,在 CSS 中 px 包括 JS 中比如 window.screen.width
的数值代表的是独立像素(大格子)。window 对象有一个 devicePixelRatio 属性,即像素比(可以理解称是一种像素密度),定义为:
window.devicePixelRatio = 物理像素(小格子) / 独立像素(大格子);
ppi
ppi(pixels per inch) 即像素密度,表示屏幕每英寸有多少个物理像素,是手机厂家宣传的重点之一,通常会直接给出数值。我们也可以通过屏幕像素,和对角线长度估算出来。
屏幕尺寸指屏幕的对角线长度,单位是英寸(inch),1 英寸 = 2.54 厘米。
普通用户比较关心屏幕像素、对角线长度、ppi。屏幕对角线的物理长度,决定了屏幕实际有多大。而屏幕像素,决定了屏幕看起来的细腻程度。相同的物理尺寸上,像素越多,屏幕自然越细腻。屏幕细腻程度可以用 ppi 衡量。
比如 iPhone6 Plus 是 5.5 英寸,分辨率(也就是物理像素)是 1920*1080 像素,那么它的 ppi 为:
ppi = √(19202+10802) / 5.5 ≈ 401ppi
也就是说它每英寸可以显示 440 个物理像素点。
dpi 是 dots per inch, 不论是 dpi 还是 ppi,实际都是一种换算的概念,即将图片承载的信息换算为现实中的图片(即人眼能实际看到的图像)。dpi 和 ppi 的区别在于换算的途径不同,dpi 面向的是打印机,而 ppi 面向的是屏幕。更多请参考:https://www.jianshu.com/p/aaa9fafdbc20
