我正在尝试使用 srcset 和尺寸在我的网站上实现响应式图像。在我的计算机上进行测试时，一切看起来都很好。与当前页面宽度相比，下载的图像是第二大图像(500 像素的页面宽度将检索 720 像素宽的图像)。这是我正在使用的:
<img src="image-240w.jpg"
srcset="image-1140w.jpg 1140w,
image-940w.jpg 940w,
image-720w.jpg 720w,
image-480w.jpg 480w,
image-240w.jpg 240w"
sizes="(max-width: 1140px) 100vw, 1140px">
在我的手机上，我感到很困惑。我有一台 Nexus 5X，屏幕分辨率为 1920x1080，设备像素比为 2.5。将视口(viewport)元添加到我的页面 ( <meta name="viewport" content="width=device-width, initial-scale=1"> ) 后，媒体查询会按预期响应——就好像我的设备刚好超过 400 像素宽 (1080 像素/4 = 432 像素)。下面的示例 A 支持这一点。这是一个 480 像素宽的图像，正如预期的那样，它悬卡在页面边缘约 48 像素处。示例 B 是一张 1140 像素宽的图像，这显然比 432 像素宽的视口(viewport)大得多。示例 C 是 img 的结果从上方标记(这就是我的目标)。
起初，我很高兴一切正常。但是，当使用我的开发人员工具查看时，我可以看到 img带有 srcset 的标签实际上下载了 1140px 宽的图像。在我看来，应该选择 480 像素宽的图像(仅略大于 432 像素宽的视口(viewport))。相反，下载的图像适用于 1080 像素的宽屏。
为什么媒体查询会像我期望的那样响应(就像我的屏幕只有 432 像素宽一样)但响应式图像只关心与实际屏幕分辨率相匹配的图像大小？它一定与 2.5 设备像素比有关，但我只是不明白这是怎么回事。
我的目标是在我的设备上获得 480 像素的图像，而不是最大的图像。我该如何实现？
编辑
或者也许我的愿望不正确，浏览器正在做它应该做的事情。解释为什么当 480 像素宽的图像已经悬在屏幕边缘时，它仍应选择 1140 像素宽的图像。
答案/证明
正如下面的回答所指出的，设备正在做它应该做的事情。只是为了证明一点，这是我的设备(432 CSS 像素但 1080 设备像素)显示 480 像素和 1140 像素的图像。尽管 480 像素的图像匹配 CSS 像素，但与匹配设备像素的 1140 像素图像相比，它非常模糊。因此，该设备最清楚，虽然我希望它选择较小的图像，但它知道它需要较大的图像(来自 响应式 srcset 和大小)以正确呈现图像。
最佳答案
答案是:是的，这与设备像素比有关。是的，该设备做对了。
图像显示正确，因为如果您不使用 CSS 覆盖图像尺寸，则会使用 sizes 属性(在您的情况下为 "100vw"，即 ~ "100%")(如果您将尺寸更改为"50vw"，您将获得"50%" 宽度)。
关键在于像素的概念不同。
普通媒体查询(最小宽度、最大宽度...)以所谓的布局像素(也称为 CSS 像素)来衡量。这些像素是真实物理像素(设备像素)的抽象，具有令人满意且可靠的像素单元来为视网膜屏幕(有时是非常低分辨率的屏幕)进行布局(CSS)。使用物理像素作为布局像素意味着在小型但高分辨率的设备上非常非常小的布局对象。在 CSS 世界中，一个像素意味着一个布局像素。这是按设备像素/设备像素比计算的。
但是，对于图像而言，这完全取决于您的设备实际拥有多少像素。如果它有 1000 像素的屏幕宽度并且图像以 100vw 显示，加载 1000 像素宽度的图像以满足屏幕的全部质量是有意义的。 (= 每个物理屏幕像素都分配了一个真实图像像素。)
如果这 1000 个物理像素仅在 360 个布局像素中测量，这甚至有意义。
另请参阅:A pixel is not a pixel .
关于html - 了解响应式图像和设备像素比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35836092/