[前端每日知识点] 逻辑像素和物理像素的区别

开头先讲概念

1. 逻辑像素是可以变化的, 如果我们不做如何处理, 那么一个逻辑像素会转换成一个物理像素
2. 物理像素也叫设备像素, 它是在设备生产的时候就确定下来的.

举个例子 帮助理解 一个宽度100px​的div​占满了宽度为300的手机, 提问逻辑像素和物理像素都是多少? 答: 100px就是逻辑像素, 宽度300就是物理像素, 在这边dpr(devicePixelRatio)就是3

2倍图的作用：根据我们之前学习到的概念，正常来讲一个物理像素等于一个逻辑像素。因为现在人们对手机屏幕的清晰度越来越高，慢慢的出现了2倍屏，3倍屏。也就是在同样的宽度下，塞下了更多的物理像素，那么这个时候就出现了一个问题。

原本在一倍屏下的手机，一个物理像素等于一个逻辑像素。现在在多倍屏的手机下，一个逻辑像素等于多个物理像素了。也就是1:n的关系。

一倍图在这种情况下，就会出现失真的情况。图片本来的逻辑像素就是那么多，不会变，放到这种多倍屏的手机上，一个逻辑像素就会放大到n倍的物理像素。 所以可以想象，图片放大了就会失真，为了不让它失真，就只有把图片的像素变成两倍，保持图片宽度不变，那么一个逻辑像素就对应一个物理像素，这样也就不会产生失真问题。