分辨率、像素比
前言
单反，手机中看到的分辨率
可以看到，iPhone12 的分辨率是 1334 x 750，这里描述的就是屏幕实际的物理像素
物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的， 1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为 pt
设备像素 = 物理像素
设备独立像素（density-independent pixel）
设备独立像素 = css 像素 = 逻辑像素
物理像素（physical pixel）
这里描述的是屏幕实际的物理像素
设备像素 = 物理像素
设备像素比（device pixel ratio）
DPR = 物理像素/ 设备独立像素
打开 Chrome 开发者工具，能看到这里的 375*667，表示的是设备独立像素（DIP）,也可以理解为 css 像素，也称为逻辑像素
设备独立像素 = CSS 像素 = 逻辑像素
这里使用 CSS 像素来记忆，也就是说。我们设计一个宽度为 375px 的 div，刚好可以充满这个设备的一行，配合高度 667px，则 div 的大小刚好可以充满整个屏幕。
设备像素比（device pixel ratio）
由了以上两个概念，就可以引出下一个概念。DPR（设备像素比），这个与我们通常说的视网膜屏（多倍屏， Retina 屏）有关
设备像素比描述的是未缩放状态下，物理像素和设备独立像素的初始比例关系
简单的计算公式：
DPR = 物理像素 / 设备独立像素
我们还是以 iPhone12 为例：
iPhone12 的 DPR = iPhone12 物理像素宽度 / iPhone12 设备独立像素
750 / 375 = 2
或者是 1334 / 667 = 2
可以得到 iPhone12 的 dpr 为 2。也就是我们常说的视网膜屏幕
视网膜（Retina）屏幕是苹果公司“发明”的一个营销术语。苹果公司将 dpr > 1 的屏幕称为视网膜屏幕