🧱 1. 物理像素（Physical Pixel）
✅ 定义：
- 设备屏幕上真实存在的、一个个小的发光点。
- 每个像素可以显示一个颜色。
🧠 举例：
-
一台 1080p 的显示器，分辨率为
1920 x 1080，即总共有：- 1920（横向）× 1080（纵向） = 207.36 万个物理像素点。
📏 2. 设备像素（Device Pixel）= 物理像素
在绝大多数文档/场景中，"设备像素"就是在说"物理像素"，它和逻辑像素相对。比如：
- 设备分辨率（屏幕参数） 就是以设备像素为单位的。
- 物理像素是固定的，逻辑像素是虚拟的，会被缩放映射到物理像素上。
🎯 3. 逻辑像素（CSS Pixel）
✅ 定义：
- 浏览器或系统在绘制页面/界面时使用的单位，是一个抽象的像素单位。
- 和设备实际分辨率无关，由浏览器、系统根据缩放设置和 DPR（devicePixelRatio）映射出来。
🔁 4. DPR（Device Pixel Ratio）
✅ 定义：
DPR = 设备的物理像素 / 逻辑像素
📌 作用：
- 告诉浏览器：一个逻辑像素要用多少个物理像素去渲染。
- 浏览器再将 CSS 布局的逻辑像素转换为实际渲染用的物理像素。
📱 示例：
| 设备 | 物理分辨率 | DPR | 逻辑视口宽度 |
|---|---|---|---|
| iPhone 13 | 1170 × 2532 | 3 | 390 × 844 |
| MacBook Pro 14" | 3024 × 1964 | 2 | 1512 × 982 |
🧮 5. 像素之间如何换算？
| 类型 | 单位 | 举例 | 含义 |
|---|---|---|---|
| 物理像素 | px | 1170px | 屏幕真实像素数 |
| 逻辑像素 | CSS px | 390px | 页面开发使用 |
| DPR | 无单位 | 3 | 显示倍率 |
换算公式：
arduino
text
复制编辑
物理像素 = 逻辑像素 × DPR👀 6. 如何查看物理/逻辑像素？
✅ 查看物理像素：
- Mac 上按住
Option + 点击苹果菜单 > 系统信息 > 显示器 - Windows 上：右键桌面 > 显示设置 > 分辨率
✅ 查看逻辑像素和 DPR：
-
在 Chrome 控制台输入：
javascriptjs 复制编辑 window.innerWidth // 逻辑像素宽度 window.devicePixelRatio // DPR
💡 7. 为什么需要 DPR？
高分屏（Retina）为了解决视觉更清晰的问题，将原本的一个逻辑像素映射成多个物理像素去渲染，比如：
- 文本更清晰
- 图片更锐利（所以才需要 @2x/@3x 图）
但带来的问题是：图片必须按 DPR 的倍数切图，比如：
| 图片用途 | 显示大小（CSS） | 实际图尺寸（物理） |
|---|---|---|
| 普通图 | 100x100px | 100x100px |
| @2x 图 | 100x100px | 200x200px |
| @3x 图 | 100x100px | 300x300px |
🧭 总结对比表
| 名称 | px 单位 | 谁使用它 | 是否依赖设备 |
|---|---|---|---|
| 物理像素 | ✅ 是 | 屏幕硬件 | 是 |
| 逻辑像素（CSS px） | ✅ 是 | 浏览器、开发 | 否（抽象单位） |
| DPR | ❌ 不是 px | 系统、浏览器 | 是（硬件决定） |