我试图为我的srcset图片实现这些尺寸：
（它应该比屏幕大，因为它是动画的）。 但是尺寸属性中的正确顺序是什么？
这不起作用（载入更大的图像）：
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中使用了最后一个真正的参数（在这种情况下，这将是错误的768px大小），但是HTML和srcset呢？
我需要做这样的事情：
sizes="(min-width: 1024px) 100vw, (min-width: 768px) and (max-width: 1023px) 150vw, 200vw"
但我以前从未见过......
答案 0 :(得分：3)
浏览器选择查询匹配的第一个大小。所以你的例子可能是（作为你的工作例子）：
(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw
或反过来说：
(max-width: 767px) 200vw, (max-width: 1023px) 150vw, 100vw
如果您的浏览器窗口为1440px宽且屏幕的像素密度为{{1}}，则可用1x - 图像应由浏览器加载（除非它已有更大的版本在缓存中。）