什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？ ​

题干 ​

• 物理像素

• 逻辑像素

• 像素密度

题解 ​

物理像素，逻辑像素和像素密度是移动端开发中常见的概念，它们之间有着密切的关系。

• 物理像素（physical pixel）是指设备屏幕上最小的物理显示单元，它是由红、绿、蓝三种颜色的发光二极管（LED）组成的。物理像素的数量决定了设备的分辨率，例如 1920x1080，表示设备在水平方向有 1920 个物理像素，在垂直方向有 1080 个物理像素。物理像素的大小是固定的，不会随着屏幕尺寸或浏览器缩放而改变。
• 逻辑像素（logical pixel）是指计算机坐标系统中的一个点，它是一个虚拟的概念，用于描述元素在设备上的显示效果。逻辑像素也称为 CSS 像素（CSS pixel），因为它是 CSS 样式代码中使用的单位。逻辑像素的大小是相对的，会随着屏幕尺寸或浏览器缩放而改变。一般来说，逻辑像素和物理像素之间有一个比例关系，称为设备像素比（device pixel ratio，DPR）。DPR 表示一个逻辑像素等于多少个物理像素，例如 DPR=2，表示一个逻辑像素等于四个物理像素（因为要考虑长和宽两个方向）。
• 像素密度（pixel density）是指每英寸（inch）所包含的物理像素的数量，它用 PPI（pixels per inch）来表示。PPI 越高，表示屏幕上的物理像素越密集，图形就越清晰和细腻。PPI 和屏幕尺寸以及分辨率有关，可以用以下公式计算：PPI = (x^2 + y^2)^0.5 / z ，其中 x 和 y 是分辨率，z 是屏幕尺寸。

在移动端开发时，为了适应不同设备的分辨率和 PPI，我们需要使用不同倍数的图片资源，例如 @1x, @2x, @3x 等。这些图片资源的尺寸是按照逻辑像素来计算的，但是它们包含了不同数量的物理像素。例如，一个原始尺寸为 50x50 的图标，在 @1x 的图片资源中就是 50x50 的物理像素，在 @2x 的图片资源中就是 100x100 的物理像素，在 @3x 的图片资源中就是 150x150 的物理像素。这样做的目的是让图标在不同设备上显示相同的大小（逻辑像素），但是保持清晰度（物理像素）。

我们可以使用媒体查询或其他方法来根据设备的 DPR 来选择合适的图片资源。

🌰：

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

贡献者 ​

isboyjc