浅析物理像素，设备独立像素，css像素的区别

设备像素：

（又称物理像素），设备能控制显示的最小单位,当屏幕在工厂生产出的那天起，上面的设备像素就不变了，单位为pt 

设备独立像素：

（简写：DIP）独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素

【与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念】

css像素：

在css中长度单位可以分为两类：绝对单位以及相对单位

px是一个相对单位，相对的是设备像素

① 在同一个设备上当屏幕的分辨率改变的时候，css像素也会发生相应的变化

②在不同的设备上，每一个css像素所代表的设备像素也会发生变化

③页面进行缩放也会引起css中px的变化

px会受到下面的因素的影响而变化

每英尺像素 （PPI）

设备像素比 （DPR）

总结：

设备像素：也称物理像素：就是一个屏幕从生产出来开始的像素单位时pt

设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制的虚拟像素，就是说在不同的屏幕上虚拟像素可以进行转化让屏幕被占满 【设备独立像素会有相关系统转换设备像素】

css像素：px  【px是一个相对单位，相对的是设备像素】在不同的设备上，同一设备但是分辨率不同的情况下，或者页面进行缩放的情况下，会发生相应的变化。

补充：

在设备独立像素中涉及到了设备像素的转化 这里就涉及到了设备像素比 【dpr】代表设备独立像素到设备像素的转换关系

计算公式有： DPR=设备像素/ 设备独立像素

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素

当dpr为3，那么1px的CSS像素宽度对应3px的物理像素的宽度，1px的CSS像素高度对应3px的物理像素高度