前言
大家好，我是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 / dipif(drp === 1:1) use 1dp show 1pxif(drp === 2:1) use 4dp show 1pxif(drp === 3:1) use 9dp show 1px如下图：
ppi（pixel per inch）
每英寸像素，即每英寸所蕴含的像素点数目，也就是像素密度，数值越高，屏幕越能以更高的密度显示图像。
计算公式为：
总结
- 无缩放状况下，1px = 1dip
- 设施像素不会扭转，然而设施虚构像素会变
- 在挪动端的规范屏下，1dip = 1dp
- dpr = dp / dip
- ppi越大，图像越清晰