移动端分辨率高，一个像素对应多个像素，图片缩小，就能清晰的显示？我想象不出来

Answer 1

TooooBug 2019-04-10 08:32:52

假设是这样，现在你的手机有4个物理像素（2x2），但是逻辑像素只有1个（1x1）。

当你用CSS写一个元素的宽高是1px时，它会显示在4px上对吗？

同理，当你写一个图片宽高1px时，它也会显示在这4px上。

这个时候就需要引入像素密度的概念，一般认为当图片分辨率低于300ppi时，人眼会感到模糊。（想象一下苍老师的一张照片被投影到你的手机上，但是马赛克成1x1像素，你就只能看到一个纯色的点。）

当我们用手机上的4px显示1px的内容时，相当于分辨率是减半的，一般会低于300ppi，可能只有100到200ppi，所以会觉得模糊。

但是当我们的图片本来就是4px大小时，它虽然逻辑上被CSS定义为宽高是1px，但它是从4px缩放而来的，也就是4px的图片显示到物理的4个像素点上，刚好1对1，这个时候ppi很可能是高于300的。

所以人眼会觉得清晰。