设备像素、独立像素、css像素

设备像素、独立像素、css像素

相信不少人像我一样听到过这3个名词，在查了一些资料后，我也想总结一二。

---

---

设备像素

1. 设备像素名词定义

   属于设备的像素，设备固有的属性，由显示设备生产厂家决定的，一旦生产出来后，不能再更改。

   
   我们的显示设备正是无数个这样的像素块组成的。

2. 分辨率
   指的是设备横向和纵向的设备像素块个数，例如1920 * 1080说的就是横向1920个像素块，纵向1080个像素块。

3. 屏幕尺寸
   指的是屏幕对角线的长度，这个长度是物理长度，单位是英寸，当然也可以转化为厘米，（1英寸 = 2.54厘米）

4. ppi(图像每英寸长度内的像素点数)
   计算公式：√(长*长 + 宽*宽) / 屏幕尺寸 = ppi，单位是dpi
   
   如下图： √(960 * 960 + 640 * 640) / 3.5 = 330dpi
   

独立像素

操作系统为了解决物理设备像素越来越大（效果就是图像显示越来越细腻，锯齿越来越小），不同的设计在不同设备上差距过大的问题，所以操作系统针对不同的设备提供了一套共通的独立像素供开发者使用。

---

2020年12月30日 补充新的理解：

• 物理像素因为手机屏幕的升级换代，同样一块小小的屏幕，会容纳越来越多物理像素块，由出厂设置，无法变更。
• 但是我们的设计稿以及相关图片有可能是宽度限定为 750 px（假设），那么放到手机上显示就会明显变小，用户又没有鹰眼，这么小的文字怕是需要放大镜啊😂😂😂
• 为了解决这个问题，ppi 应运而生，设计手机上的多个物理真实像素块去表示指定的一个虚拟像素块，然后这个 （ 真实物理像素 / 虚拟像素 = 缩放比 ）

---

css像素

现在，在没有缩放的情况下，1个css像素等同于一个设备独立像素。

参考链接

[1] 百度百科 子像素
[2] 蚂蚁部落 设备像素、独立像素和css像素