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

这是一个关于前端响应式设计和高分辨率屏幕适配的核心问题。下面详细解释这些概念及其在移动端开发中的应用。

一、核心概念解析

1. 物理像素 (Physical Pixels)

定义：物理像素是显示屏上真实存在的最小物理单位，也称为设备像素（Device Pixel）。
特点：
是硬件层面的概念，由屏幕的物理结构决定。
每个物理像素只能显示一种颜色。
屏幕的分辨率就是指其物理像素的总数量（如 1920×1080）。
举例：iPhone 14 Pro 的屏幕有 2556 × 1179 个物理像素点。

2. 逻辑像素 (Logical Pixels) / CSS 像素

定义：逻辑像素是 CSS 和网页布局中使用的抽象单位，也称为 CSS 像素或设备独立像素（DIP, Device-Independent Pixel）。
特点：
是软件层面的概念，用于网页布局。
浏览器会根据设备的缩放比例和像素密度，将逻辑像素映射到物理像素上。
在标准屏幕上，1 逻辑像素通常对应 1 物理像素；但在高清屏上，1 逻辑像素可能对应多个物理像素。
举例：你在 CSS 中写 width: 100px;，这里的 px 就是逻辑像素。

3. 像素密度 (Pixel Density)

定义：像素密度是指每英寸长度上包含的物理像素数量，单位是 PPI（Pixels Per Inch）。
意义：
PPI 越高，屏幕越细腻，图像越清晰。
传统显示器 PPI 约为 96~120，而现代手机屏幕（如 Retina 屏）PPI 可达 300 以上。
与 DPR 的关系：像素密度直接决定了设备像素比（DPR, Device Pixel Ratio）。

4. 设备像素比 (DPR, Device Pixel Ratio)

定义：DPR = 物理像素数 / 逻辑像素数。
公式：DPR = 物理像素 / 逻辑像素
常见值：
标准屏：DPR = 1（1 物理像素 = 1 逻辑像素）
高清屏（Retina）：DPR = 2 或 3（1 逻辑像素 = 2×2 或 3×3 物理像素）

二、为什么移动端需要 @2x, @3x 图片？

问题背景

在高清屏（如 iPhone Retina）上，如果使用普通图片（@1x），会出现模糊现象。原因如下：

逻辑尺寸 vs 物理尺寸：

一张 200px × 200px 的图片，在标准屏上占据 200×200 物理像素。
在 DPR=2 的设备上，1 逻辑像素对应 4 个物理像素（2×2）。浏览器为了填满这个区域，会将原图拉伸到 400×400 物理像素，导致图像模糊。

解决方案：提供高倍图

为不同 DPR 的设备提供对应的高分辨率图片：
- image@1x.png：200×200 像素（DPR=1）
- image@2x.png：400×400 像素（DPR=2）
- image@3x.png：600×600 像素（DPR=3）
这样，无论 DPR 是多少，浏览器都能找到合适的物理像素来显示图像，保持清晰锐利。

实现方式

CSS background-image + media query

.icon {
     width: 100px;
     height: 100px;
     background-image: url("icon@1x.png");
     background-size: 100px 100px;
   }

   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
     .icon {
       background-image: url("icon@2x.png");
     }
   }

   @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
     .icon {
       background-image: url("icon@3x.png");
     }
   }

HTML <img> + srcset 属性（推荐）

<img src="image@1x.jpg"
        srcset="image@1x.jpg 1x,
                image@2x.jpg 2x,
                image@3x.jpg 3x"
        alt="示例图片">

浏览器会根据设备的 DPR 自动选择最合适的图片。

使用 SVG 矢量图

对于图标、Logo 等简单图形，优先使用 SVG 格式。SVG 是矢量图，可以无限缩放而不失真，天然适配所有分辨率。

三、总结

概念	说明
物理像素	屏幕的真实像素点，硬件决定
逻辑像素	CSS 中的 `px`，布局单位
像素密度 (PPI)	每英寸的物理像素数，决定清晰度
DPR	物理像素 / 逻辑像素，关键桥梁

为什么需要 @2x/@3x 图片？
因为高清屏（高 DPR）需要用更多物理像素来渲染一个逻辑像素。提供高倍图是为了让每个逻辑像素区域有足够的像素信息，从而避免图像被拉伸模糊，确保在所有设备上都能呈现清晰的视觉效果。

在现代移动端开发中，响应式图片策略（srcset、<picture>、SVG）是保证用户体验的基础。

THE END

前端 CSS 面试题