我已经阅读了许多关于使用 srcset 进行设备像素密度调整和艺术指导的文章:
The State of Responsive Images in 2015 by Paddi Macdonnell
srcset Part 2: The W descriptor and sizes attribute by Rich Finelli
这些都没有明确是否可以在没有sizes 属性的情况下使用 w-descriptors。大多数表示相反(w-descriptor 与 sizes 一起工作)
我自己的初步测试证实图像切换仅使用 w 描述符就可以工作。
我发现，当使用 w 描述符根据宽度指定许多不同的图像时，浏览器将选择最适合受限空间的图像。
不需要其他代码。
在设计响应式网站时，这显然是令人困惑的，因为作为设计师，我只需要以下情况:
- 根据设备像素密度更改图像(对我有用。太棒了!)
- 根据可用宽度更改图像(艺术方向)(对我有用。太棒了!)
我想知道 sizes 是如何影响这次崩溃的。我非常感谢这是一项新功能。
最佳答案
sizes 严格 不是必需的，但如果您不使用它，那些 w 描述符将针对 进行解析sizes 的默认 值，即 100vw。换句话说，省略 sizes 等同于指定 sizes=100vw，这意味着图像旨在以全屏宽度呈现。如果这是您的意图，那很好，请随意忽略它，但指定它(以明确您的意图)可能会更好。
但是，如果您打算做任何其他事情，例如 ausi 的回答中的示例，其中元素设置为 200px，那么您最好指定 sizes 否则您会得到不好的结果。
我还没有阅读您链接到的教程，但以防万一他们没有说清楚:决定下载哪个源的算法是基于像素密度的，如 所示x 描述符。 w 描述符被转换为一个等价的x 描述符，方法是将它的值除以适当的sizes 值。它们存在的唯一原因是有时您不知道在创作时图像的最终布局大小(以像素为单位)。如果您知道最终大小，使用 x 可能更容易。
(虽然它不是为此目的而设计的，但如果您只是想避免通过数学运算来计算 x 描述符。在某些情况下，仅列出源宽度和布局宽度并让浏览器弄清楚事情会更容易。但是，如果您知道布局宽度，则应该为它很明确，所以你的比率是简单的整数无论如何 - 发送 1x 或 2x 图像比发送 .9x 图像并让浏览器放大它要好得多。)
关于css - srcset 中的 w-descriptors 必须使用 sizes 属性吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35379385/