【计算机】像素

2021/09/09 14:50:20

像素分类

设备屏幕上实际的像素点。比如 iPhone 6 的屏幕在宽度方向有 750 个像素点，高度方向有 1334 个像素点，所以 iPhone 6 总共有 750*1334 个物理像素。

逻辑像素也叫“设备独立像素”（Device Independent Pixel, DIP），CSS 像素 = 设备独立像素 = 逻辑像素。

由于不同的物理设备的物理像素的大小是不一样的，所以 css 认为浏览器应该对 css 中的像素进行调节，使得浏览器中 1css 像素的大小在不同物理设备上看上去大小总是差不多，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算。

默认情况下一个 css 像素应该是等于一个物理像素的宽度的。

dpr 描述的是未缩放状态下，物理像素和 CSS 像素的初始比例关系

DPR = 物理像素/逻辑像素

每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。

ppi 越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，单位体积的质量就越大，ppi 越高，单位面积的像素越多。

ppi 是屏幕对角线的物理像素的个数除以对角线英寸数。

分辨率为 1080 x 2340 的 iPhone12 mini 为例， ppi = Math.sqrt(1080 _ 1080 + 2340 _ 2340) / 5.4 ，值为 476PPI。

在以前，CSS 里写个 1px，屏幕就渲染成 1 个实际的像素点，DPR=1。后来出现了高分辨率屏幕，一个逻辑像素要用多个物理像素去渲染，即 DPR > 1（不一定非得是整数）。

单位	名称	种类	描述
pt	DP（device pixels）	绝对单位	设置设备像素（物理像素），屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。1pt = 1/72inch
px	PX（CSS pixels）	相对单位	设置 css 像素，而 css 像素是相对于设备物理像素确定的。px 是相对于物理像素的单位
em		相对单位	1`em`相当于当前的字体尺寸（`font-size`属性）
rem		相对单位	1`rem`相当于根元素（html）的字体尺寸（`font-size`属性）
vw、vh	Viewport Height 、 Viewport Width	相对单位	相对于视窗的尺寸，1vw 等于 1/100 的视口宽度。
vmin、vmcx	Viewport Height 、 Viewport Width	相对单位	vmin：vw 和 vh 中较小的那个。 vmax：vw 和 vh 中较大的那个。

pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(inch)，inch 即英寸，而 1 英寸等于 2.54 厘米。

现在所说的分辨率通常等同于设备的物理像素。

注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

屏幕尺寸如 5.4 英寸代表的是屏幕对角线距离为 5.4 英寸