设备像素与 CSS 像素的区别

理解设备像素、CSS 像素、DIP、DPR 和 PPI 的概念与关系

问题

设备像素、CSS 像素、设备独立像素、DPR、PPI 之间有什么区别？

设备像素是物理屏幕上的最小可见单元，用于实际渲染图像或文本。它表示硬件像素点的数量，通常用于描述屏幕的分辨率。例如，一个 1920×1080 的屏幕有 1920×1080 个设备像素。

CSS 像素是 Web 开发中使用的抽象单位，用于定义网页上的布局和样式。它是一个相对单位，不直接对应物理屏幕上的像素。

.box {
  width: 100px;  /* 100 个 CSS 像素 */
  height: 100px;
}

设备独立像素是一种逻辑像素单位，用于将 CSS 像素与实际渲染的设备像素进行关联。在标准的 96 DPI 情况下，1 DIP 等于 1 CSS 像素。它在 CSS 像素与设备像素之间建立了转换层。

设备像素比是设备的物理像素与 CSS 像素之间的比例关系。它表示在一个 CSS 像素中有多少个设备像素。

// 获取设备像素比
const dpr = window.devicePixelRatio;
console.log(dpr); // 例如：2（Retina 屏幕）

例如，DPR 为 2 时，1 个 CSS 像素对应 2×2 = 4 个设备像素。

PPI 表示屏幕上每英寸区域内的像素数量，是描述屏幕分辨率的物理指标。更高的 PPI 值意味着更高的像素密度和更细腻的图像显示。