1、背景

在 css 中我们通常会使用 px 作为单位来表示尺寸的大小. 一个非常简单的尺寸单位, 但是我们要额外关注的是, px 是一个抽象逻辑单位, 在不同设备、不同分辨率下, px 所代表的物理像素是不一样的.

要详细了解这个情况, 我们需要额外对设备像素、设备独立像素、dpr、ppi 等概念有一个精准的理解.

2、设备像素、物理分辨率

设备像素, 又称为物理像素, 是屏幕硬件层面的最小显示单元（pt）, 屏幕在生产时就已经确定了其设备像素的数量和排列方式.

例如我们通常说的

2K 显示器, 其分辨率为 2560 x 1440, 即 2560 个水平物理像素和 1440 个垂直物理像素, 总共有 3,686,400 个设备像素.

1080P 显示器, 其分辨率为 1920 x 1080, 即 1920 个水平物理像素和 1080 个垂直物理像素, 总共有 2,073,600 个设备像素.

4K 显示器, 其分辨率为 3840 x 2160, 即 3840 个水平物理像素和 2160 个垂直物理像素, 总共有 7,372,800 个设备像素.

这里提到的分辨率, 是指物理分辨率. 一个物理像素点 由 pt 来表示, 对于当前设备而言, pt 是物理绝对尺寸单位, 大小始终固定, 不会随着浏览器大小变化、缩放、各种设置分辨率等操作而变化, 对于某些设备, 他有如下换算公式

$1pt = 1/72 inch$

$1 inch = 2.54 cm$

1
1pt = 1/72 inch
2
1 inch = 2.54 cm

3、设备独立像素

设备独立像素（Device Independent Pixel）：又称为逻辑像素, 指的是可以通过程序控制的虚拟像素, css 中的像素单位 px 就是一个逻辑像素单位.

px 是一个相对单位, 它的大小并不固定.

通常, 我们可以在电脑上通过设置, 改变屏幕的分辨率, 这里可以被改变的分辨率, 就是逻辑像素分辨率. 注意它与物理像素分辨率的区别.

在浏览器的开发者调试工具中, 我们可以通过 window.screen.width / window.screen.height 查看当前设备的逻辑分辨率

1
window.screen.width
2
// 2560 px
3

4
window.screen.height
5
// 1440 px

当我在系统的屏幕设置中修改了分辨率之后, 这个值会发生对应的变化.

4、设备分辨率缩放比（dpr）

设备分辨率缩放比（Device Pixel Ratio）：又称为设备像素比, 指的是物理像素和逻辑像素的比值. 在浏览器的开发者工具中, 我们可以通过如下的方式查看当前的缩放比值

1
window.devicePixelRatio
2
// 2

例如, 我的电脑显示器为物理分辨率为 5K, 5120 x 2880

我的系统设置的标准逻辑分辨率为 2560 x 1440

那么, 此时, 我的设备分辨率缩放比可以通过如下方式获得

devicePixelRatio = 物理分辨率宽度 / 逻辑分辨率宽度

1
// 宽度相比
2
window.devicePixelRatio = 5120 / 2560
3

4
// 或者高度相比
5
window.devicePixelRatio = 2880 / 1440

因此, 当前的设备分辨率缩放比为 2.

此时, 一个 px 在我的电脑上, 就对应了 2 个物理像素.

1
1px = 2pt

需要注意的是, 如果我在系统修改了逻辑分辨率, 那么最终的设备分辨率缩放比也会对应的发生变化. 物理分辨率是不会被改变的.

5、浏览器缩放比

以 chrome 浏览器为例, 我们可以在浏览器的设置中, 修改网页缩放比. 和修改屏幕分辨率不同, 修改网页缩放比是在设备分辨率缩放比的基础之上进行修改.

例如, 我当前的设备分辨率缩放比为 2

然后我再浏览器中设置了网页缩放比为 150%

那么, 此时, 对于网页而言, 新的设备分辨率缩放比为 2 * 1.5 = 3

因此, 此时, 一个 px 在我的电脑上, 就对应了 3 个物理像素.

1
// 可以在开发者工具中查看结果
2
window.devicePixelRatio = 2 * 1.5
3
1px = 3pt

视觉上的表现就是整个网页变大. 我们也可以通过快捷键直接修改网页缩放比. commond + 放大, command - 缩小.

6、屏幕大小表述方式：英寸

通常, 我们使用单位 英寸(inch) 来表示一个屏幕的物理尺寸大小. 这个尺寸大小指的是屏幕显示器对角线的长度.

$size = \sqrt{width^2 + height^2}$

1
// 英寸换算尺寸
2
1inch = 2.54cm

7、PPI

PPI （pixel per inch）, 每英寸像素, 表示每英寸所包含的像素点数目, 更确切的说法是像素密度. 数值越高, 说明屏幕能以更高密度显示图像, 画面的细节就会越丰富.

假定屏幕的物理分辨率为 X x Y, 那么 PPI 的计算公式为：

$PPI = \sqrt{(X^2 + Y^2)} / size$

size 表示屏幕尺寸, 上面我们已经计算过该值.

例如对于 iphone 12 来说 , 它的物理分辨率为 2532 x 1170, 屏幕尺寸为 6.1 英寸, 带入公式计算出来的 PPI 就约等于 460 ppi

$PPI = \sqrt{(2532^2 + 1170^2)} / 6.1$

通常情况下, PPI 是用于表达设备渲染精度的一种比较靠谱的指标. 因此, PPI 越高, 表示在有限的物理尺寸中, 显示器能渲染的图像就越精细, 显示器的质量就越高.

理解了这些基础概念之后, 接下来, 我们分享一些在实践中比较常见的场景进一步理解他们.