分辨率与像素

CSS中最常用的属性是 px ，但是px是一个抽象逻辑单位，在不同的显示器分辨率、系统缩放比例、网页缩放比例下，px 所代表的物理像素是不一样的。本文是为了帮助大家更好的梳理清楚他们之间的关系。

设备像素、物理分辨率

物理分辨率是平米硬件层面的最小显示单元 (pt)，屏幕在产生时就已经确定了其设备像素的数量和排列方式。

上面提到的分辨率是指物理分辨率，一个物理像素点由 pt 来表示，pt是物理绝对尺寸单位，大小始终固定，指的是 72分之一英寸(inch)

设备独立像素、逻辑分辨率

逻辑分辨率指的是可以通过程序控制的虚拟像素，常用的 px 就是一个逻辑像素单位，也就是相对单位。

Browser 的DevTool中，可以通过下述命令查看当前设备的逻辑分辨率。

window.screen.width
winwow.screen.height

设备分辨率缩放比 (dpr)

设备像素比 dpr 指的是物理分辨率和逻辑分辨率的比值。

可以通过下述命令查看

window.devicePixelRatio

例如：Studio Display的物理分辨率是 5120*2880 ，但是默认的逻辑分辨率是 1440P。

根据公式因此，当前的设备分辨率缩放比为 2。

此时 1个px在我的电脑上，就对应了2个物理像素。 1px = 2pt。

浏览器缩放比

浏览器提供网页缩放的功能，和修改屏幕分辨率不同，修改网页缩放比是在dpr的基础之上进行修改。

Exa：我当前的设备dpr是2，我在浏览器设置的网页缩放为 150%。那么对网页而言，新的设备分辨率缩放比为 2*1.5=3

window.devicePixelRatio = 2 * 1.5 = 3
1px === 3pt

屏幕大小的表述方式：英寸

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

PPI

PPI 每英寸像素，表示每英寸所包含的像素点数目 === 像素密度。数值越高，说明屏幕能以更高密度显示图像，画面的细节就会越丰富。

size表示屏幕尺寸，x和y表示屏幕的物理分辨率