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

【问题标题】：What ist the correct srcset sizes order and media query什么是正确的 srcset 大小顺序和媒体查询
【发布时间】：2017-01-12 22:05:04
【问题描述】：

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

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

这不起作用（加载了更大的图像）：

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

这似乎暂时有效：

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

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

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

我需要这样做吗：

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

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

【问题讨论】：

【解决方案1】：

浏览器选择查询匹配的第一个尺寸。因此，您的示例可以是（作为您的工作示例）：

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

或者反过来：

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

如果您的浏览器窗口为1440px 宽且屏幕的像素密度为1x，则浏览器应加载可用的1440px-图像（除非缓存中已经有更大的版本）。

【讨论】：