请解释物理像素、逻辑像素和像素密度的概念。在移动端开发中，为什么要使用 @3x 和 @2x 这样的图片资源？
考察说明
考查对移动端像素体系的理解，以及高清适配中多倍图使用的原理。
回答思路
- 【回答框架 1】物理像素是屏幕实际显示的最小单位，逻辑像素是 CSS 使用的抽象单位，像素密度常用 DPR（设备像素比）衡量，公式为 DPR = 物理像素 / 逻辑像素。例如 iPhone 6/7/8 的 DPR 为 2，表示一个逻辑像素由 2×2 个物理像素组成。
- 【回答框架 2】在 CSS 中 1px 表示一个逻辑像素，但物理设备可能用多个物理像素渲染，导致同样尺寸的元素在不同屏幕上显示的实际大小不同。理解这一机制是响应式设计的基础。
- 【回答框架 3】@2x 和 @3x 代表不同 DPR 下使用的图片资源，例如 DPR 为 2 时，若图片尺寸为 100×100 逻辑像素，实际需要 200×200 物理像素的图像，否则图片会被放大而模糊。
- 【回答框架 4】移动端设备类型多样，DPR 通常为 2 或 3，为保证高清显示，需要提供对应倍数的图片。同时，通过使用 srcset 或 picture 标签，浏览器会根据屏幕 DPR 选择合适资源，兼顾清晰度和性能。
- 【关键点 1】物理像素是屏幕硬件的最小显示单元，逻辑像素是 CSS 布局的坐标单位。
- 【关键点 2】像素密度用 DPR（物理像素/逻辑像素）表示，常见值 1、2、3。
- 【关键点 3】@2x/@3x 图片是为高 DPR 屏幕提供的高清资源，避免图片显示模糊。
- 【关键点 4】实现上可使用 CSS 媒体查询（基于 resolution）或 srcset 按 DPR 选择资源。
- 【易错点 1】逻辑像素与物理像素并不是固定 1:1 关系，需区分设备像素和 CSS 像素。
- 【易错点 2】仅使用固定尺寸图片会导致高 DPR 屏幕上模糊或低 DPR 屏幕上浪费带宽。