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 是物理绝对尺寸单位，大小始终固定，指的是 72分之一英寸（inch）,由如下换算公式

$1pt = 1/72 inch$

$1 inch = 2.54 cm$

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

2、设备独立像素

设备独立像素（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

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

3、设备分辨率缩放比（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 个物理像素。

1px = 2pt

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

4、浏览器缩放比

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

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

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

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

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

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

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

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

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

$size = √width² + height²$

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

6、PPI

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

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

$PPI = √(X² + Y²) / size$

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

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

$PPI = √(2532² + 1170²) / 6.1$

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

除此之外，还有一个与 PPI 类似的概念，叫做 DPI（Dots per inch）,这个概念的计算方式与 PPI 基本是一致的。不过，DPI 通常用于表示打印机等将渲染内容映射到纸张、相片等实物上的像素密度，而 PPI 则用于表示直接在设备上显示时的像素密度，注意他们的区别。因此，对于前端开发来说，我们只有在很少的场景中，才会关注到 DPI 的概念。

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