CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别
前言
大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。
众所周知，在CSS中我们通常是使用px作为单位的场景多一点，在PC端，1个像素恰好对应电脑屏幕上的1个物理像素点，正因如此，会给刚开始了解CSS的同学一个错觉就是：css中的像素就是设备的物理像素。
其实不然，css中的像素只是一个抽象的单位，在不同的设备与环境中，css中的1px所代表的设备物理像素是不同的，以移动端为🌰，在做移动端开发时，就会出现1px的问题，在不同机型的移动设备上，显示的效果却又很大的差异。这就涉及到设备像素、css像素、设备独立像素、dpr、ppi的概念。
css像素
css像素就是我们在进行开发时，经常使用的px单位。px本身从主观的意义来讲，其实应该是一个绝对单位，但是从客观的角度出发，在不同的机型下，他又相对于设备像素，主要体现在两个方面：
- 调整屏幕分辨率
- 两个不同型号的手机
在页面进行缩放的操作，其实也会引起css中px的变化，举个🌰：
有一个元素320px，正好填满整个屏幕，把页面放大1倍后，原本1px的元素变成2px，在实际宽度不变的情况下，1px变得跟原来的2px一样了，之前需要320px才能填满，现在只需要160px，此时元素会占据更多的设备像素。
由此可见，px会受到dpr（设备像素比）与ppi（每英寸像素比）的影响。
设备像素（device pixels）
设备像素也就是物理像素，即设备控制显示的最新物理单位，不一定是一个1x1 或者 2x2的小正方块，它其实不存在具体的标准宽高，只是用于显示完整色彩的一个抽象“点”，可以参考公园里景观里的变色灯带，一个彩灯由红、蓝、绿三个小灯组成，混成各种颜色。
从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt。
设备独立像素（Device Independent Pixel）
设备独立像素与就是，与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总的概念，包括了css像素。
在JavaScript中可以通过window.screen.width/window.screen.height查看。
举个简单的🌰：我有一台辣鸡笔记本，我想玩给他爱，然后电脑的分辨率为2560x1600，可能我觉得这个分辨率对我来说不太舒服，我再 设置--影响--图形--分辨率 中把它调到1440x900。
这里的分辨率其实不严谨的讲，就指的是设备独立像素，一个设备独立像素里可能会包含1个或者多个物理像素点，包含的越多，画质越高。
为什么会出现设备独立像素这种虚拟像素单位概念呢？举个🌰：
假设，我有一个iPhone12 和 iPhone13，尺寸都是5.4，iphone12的分辨率是1040*960， iphone13的分辨率是2080×1170，那么，ihpone12有1170个物理像素，iphone有2532个物理像素。
如果按照真实物理像素进行布局，以12为例，那么到13上，又会出现一半的空白，为了避免这种情况的出现，出现了虚拟像素单位，我们统一12和13的虚拟像素都是1040个，只是在12上，1个虚拟像素被换算成1个物理像素，在13上，1个虚拟像素，被换算成2个物理像素。
这种n个虚拟像素:n个物理像素比例式的换算，被统称为设备像素比，也就是dpr
dpr（Device pixel ratio）
设备像素比，代表设备独立像素到设备像素的转换关系。
在JavaScript中可以通过window.devicePixelRatio获取。
计算公式为：
drp = dp / dip
if(drp === 1:1) use 1dp show 1px
if(drp === 2:1) use 4dp show 1px
if(drp === 3:1) use 9dp show 1px如下图：
ppi（pixel per inch）
每英寸像素，即每英寸所包含的像素点数目，也就是像素密度，数值越高，屏幕越能以更高的密度显示图像。
计算公式为：
总结
- 无缩放情况下，1px = 1dip
- 设备像素不会改变，但是设备虚拟像素会变
- 在移动端的标准屏下，1dip = 1dp
- dpr = dp / dip
- ppi越大，图像越清晰