分辨率、像素比

前言

单反,手机中看到的分辨率

可以看到,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 的屏幕称为视网膜屏幕

参考资料

Last Updated:
Contributors: johan