关于物理像素、逻辑像素（css像素）、分辨率、像素比的超详细讲解

在日常生活中，有这样一个问题。同样的图片为什么在不同的设备上显示的大小是不一样的。🤒带着这个问题来说明一下。

一、物理像素

设备刚生产出来就已经固定了，不容更改的。

二、逻辑像素

在开发的过程中，我们所写的css中的px就是逻辑像素。一般在开发的过程中，UI工程师将设计稿给我们的就是逻辑像素。

三、像素比

物理像素/逻辑像素。由公式可知，像素比就是物理像素与逻辑像素的比值，即当前设备将通过几个物理像素点来绘制一个逻辑像素点。

通过js可以获取当前设备的像素比

window.devicePixelRatio

举个例子：

前端工程师现在要画一个2px * 2px的正方形

设备1： 像素比为1，通过2*2个物理像素点来画的这个正方形

设备2： 像素比为2，通过2 * （2 * 2）,一共8个物理像素点来画的这个正方形。

注意，设备2所绘制出的正方形其物理尺寸并不一定比设备1的大，因为我们前面提到过，物理像素并不是一个固定大小的单位，其大小由厂家指定。那么如果设备2和设备1所绘制出来的正方形物理面积相同，且设备2用了更多的物理像素点来绘制，很显然，设备2的显示将更为细腻。

四、分辨率

像素点的总数就是分辨率。例如1000*1000就是1000000个像素点！

五、实际开发注意点

在拿到一个设计稿后，我们应该比较自己电脑屏幕和设计稿的比值，然后再将设计稿的逻辑像素乘以比值转换成我们电脑实际的逻辑像素。