共计 1708 个字符，预计需要花费 5 分钟才能阅读完成。
前言
大家好，我是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 越大，图像越清晰