Question

我对响应式图像感到困惑。 在移动设备上查看时，设备像素比率如何影响图像。

我有一台分辨率为480x854且设备像素比率为1.5的移动设备，即如果我发送宽度为320px（480 / 1.5）的图像，它会自动适合浏览器的宽度，前提是我们指定了视口，

<meta name="viewport" content="width=device-width, initial-scale=1">

如果我提供宽度为480像素的图像，则它会超出浏览器的实际宽度。但是，如果指定这个，

<style>
    img {
        width: 100%;
    }
</style>

在浏览器宽度上显示100％，质量明显高于320px图像。

那么，根据设备像素比率显示图像的可行方法是什么？我是否必须为设备发送320px或480px（100％）图像？

Answer 1

浏览器负责所需的所有扩展。如果您的实际设备宽度为480像素，虚拟宽度为320像素，其中包含缩放到100％的图像（虚拟宽度为320像素）但图像宽度为480像素，它将在所有480像素中显示就好了，但是以编程方式将测量为320px。

现在，尝试使像素完美无瑕是没有意义的。有许多设备具有许多分辨率。发送质量合适的图像，让浏览器为您完成工作。