物理像素、逻辑像素、DPR，移动端开发必知的概念
2023-10-06 21:38:52
作为一名前端工程师，写 CSS 时经常会和像素（px）打交道，如果是做移动端页面就更离不开分辨率、DPR 这些知识点。为了弄清楚这些概念，本文将以前端的角度来对这些概念做下梳理。
一、物理像素和逻辑像素
物理像素是指显示器上实际的像素点，它是显示器硬件的物理属性，不能被改变。而逻辑像素是指 CSS 中的像素单位，它可以被改变，以适应不同的设备和屏幕分辨率。
| 单位 | 解释 |
|---|---|
| 物理像素 | 显示器上实际的像素点 |
| 逻辑像素 | CSS 中的像素单位 |
二、DPR
DPR（Device Pixel Ratio）是指设备像素密度，它是物理像素和逻辑像素之间的比例。DPR越大，则物理像素越小，屏幕上的元素也就越精细。
例如，一台设备的屏幕分辨率为1080 x 1920，它的物理像素是1080 x 1920个。如果它的DPR为2，则它的逻辑像素是2160 x 3840个。这意味着，在该设备上，每个逻辑像素实际上由4个物理像素组成。
三、PPI
PPI（Pixels Per Inch）是指每英寸的像素数，它是衡量屏幕精细度的另一个指标。PPI越高，则屏幕上的元素也就越精细。
PPI和DPR之间存在着一定的关系，可以根据以下公式计算：
PPI = DPR * 25.4
例如，一台设备的DPR为2，它的PPI就是50.8 PPI。
四、屏幕分辨率
屏幕分辨率是指显示器上像素的总数，它通常用宽 x 高的格式表示。例如，1080 x 1920表示屏幕的宽度为1080个像素，高度为1920个像素。
屏幕分辨率和DPR共同决定了屏幕的精细度。DPR越高，屏幕上的元素也就越精细。屏幕分辨率越高，屏幕上显示的内容也就越多。
五、总结
物理像素、逻辑像素、DPR、PPI和屏幕分辨率是移动端开发中必知的概念。理解这些概念可以帮助开发者更好地理解和使用这些概念，以便开发出更好的移动端页面。
六、常见问题
- 物理像素和逻辑像素有什么区别？
物理像素是指显示器上实际的像素点，它是显示器硬件的物理属性，不能被改变。而逻辑像素是指 CSS 中的像素单位，它可以被改变，以适应不同的设备和屏幕分辨率。
- DPR是什么？
DPR（Device Pixel Ratio）是指设备像素密度，它是物理像素和逻辑像素之间的比例。DPR越大，则物理像素越小，屏幕上的元素也就越精细。
- PPI是什么？
PPI（Pixels Per Inch）是指每英寸的像素数，它是衡量屏幕精细度的另一个指标。PPI越高，则屏幕上的元素也就越精细。
- 屏幕分辨率是什么？
屏幕分辨率是指显示器上像素的总数，它通常用宽 x 高的格式表示。例如，1080 x 1920表示屏幕的宽度为1080个像素，高度为1920个像素。
- DPR、PPI和屏幕分辨率之间有什么关系？
DPR、PPI和屏幕分辨率之间存在着一定的关系，可以根据以下公式计算：
PPI = DPR * 25.4
