什么是正确的 srcset 大小顺序和媒体查询

Question

我正在尝试为我的 srcset 图像实现这些尺寸：

• 桌面（最小宽度：1024px）：100vw
• 平板电脑（最小宽度：768px）：150vw
• Phone+其他：200vw

（它应该比屏幕大，因为它是动画）。 但是 sizes 属性中的正确顺序是什么？

这没有用（加载大图的方式）：

sizes="(min-width: 768px) 150vw, (min-width: 1024px) 100vw, 200vw"

这似乎现在有效：

sizes="(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw"

在我的 1440px Macbook Air 上，未加载可用的 1440px 图像，而是加载更大的 1700px 版本。但这可能是浏览器的决定。

但理论上min-width: 786px也适用于min-width: 1024px，因为大于1024px的屏幕也大于768px。在 CSS 中使用了最后一个 true 参数（在这种情况下，这将是错误的 768px 大小），但是 HTML 和 srcset 呢？

我需要做这样的事情吗：

sizes="(min-width: 1024px) 100vw, (min-width: 768px) and (max-width: 1023px) 150vw, 200vw"

但我以前从未见过....

Answer 1

浏览器选择查询匹配的第一个尺寸。所以你的例子可以是（作为你的工作例子）：

(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw

或反过来：

(max-width: 767px) 200vw, (max-width: 1023px) 150vw, 100vw

如果您的浏览器 window 是 1440px 宽并且屏幕的像素密度是 1x 可用的 1440px-图像应该由浏览器加载（除非它已经在缓存中有一个更大的版本。