我今天一直在玩响应式图像，并一直在努力确保下载和显示正确尺寸的图像以用于以下捕捉点：480px，900px，1800px，2400px。
这是标记：
<img
sizes="(max-width: 2400px) 100vw, 2400px"
srcset="
boat-480.jpg 480w,
boat-900.jpg 900w,
boat-1800.jpg 1800w,
boat-2400.jpg 2400w"
src="boat-2400.jpg"
alt="This is a boat">
到目前为止，我已设法让浏览器下载图片的正确版本，以便当我在 Chrome 中模拟480px屏幕时，像素比率为1 浏览器下载boat-480.jpg。
但是，我注意到的是，虽然这一切看起来都很好，但浏览器也在下载boat-1800.jpg，实际上是在视图中显示而不是boat-480.jpg。
奇怪的是，当我在iOS上的Chrome上测试时，浏览器实际上已经下载了boat-2400.jpg，这更令人担忧。
知道为什么会这样吗？我错过了什么吗？我想我不需要sizes属性，因为我在所有视图中都将图像设置为100vw，但也许我还缺少其他内容。
如果您有兴趣，可以看到页面here：
我真的很感谢你对此的帮助。
答案 0 :(得分：6)
设备像素比率是每个CSS像素的设备像素数，与以下内容相关：
srcset属性＆amp; x描述符在<img>标记上，x属性中的srcset描述符用于定义设备像素比率。所以在：
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
src属性（image.jpg）。srcset属性＆amp; w描述符如果您想在较大或较小的视口上使用其他图片，w中的srcset描述符和新属性（sizes）将起作用：
<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
这提到第一张图片的宽度为200px，第二张图片为400px，第三张图片为600px。此外，如果用户的屏幕宽度为150 CSS pixels，则根据x描述符，这相当于以下内容：
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 6x">
sizes属性通过使用sizes属性以及w srcset描述符，您可以在不同屏幕尺寸上想要不同大小的图像（不同高度，宽度）的实际实现属性。
<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
如果浏览器宽度为500 CSS pixels，则图片将显示250px宽（因为50vw）。现在，这相当于指定：
<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">
因此，对于1.5x显示，image-2x.jpg将由浏览器下载，因为它提供设备像素比率 1.6x（这是最适合1.5x显示。）
您已经提到您已经模拟了 480px CSS宽度屏幕。
因为您已将sizes设置为100vw，这相当于指定：
<img src="boat-2400.jpg" srcset="
boat-480.jpg 1x,
boat-900.jpg 1.88x,
boat-1800.jpg 3.75x,
boat-2400.jpg 5x">
您可能会显示3x，因此浏览器会下载boat-1800.jpg个文件。
<强>问题
奇怪的是，当我在iOS上的Chrome上测试时，浏览器实际上下载了boat-2400.jpg，这更令人担忧。
这可能是由于iOS设备的设备像素比率较高，可能接近5。
我错过了什么吗？
我不这么认为。
我想我不需要sizes属性，因为我在所有视图中将图像设置为100vw
如果要使用w描述符，则需要sizes属性。