Picturefill 2：sizes属性的目的是什么？

Question

我试图理解PictureFill 2.0 polyfill中sizes属性的确切含义。以下是一些基本示例：

<img sizes="100vw, (min-width: 40em) 80vw"
srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="test">

<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="medium.jpg 375w, medium.jpg 480w, large.jpg 768w" alt="A car">

根据documentation：

  

sizes语法用于定义跨越图像的大小   断点数。 srcset然后定义一个图像数组和   他们固有的尺寸。

因此sizes属性定义跨断点的图像大小。那不是CSS的用途吗？为什么要为HTML属性中的图像显示定义类似CSS的规则？我在这里缺少什么？

另一方面，为什么官方文件说：

  

超出本指南的范围，详细了解如何使用新的srcset＆amp;尺寸属性......

跆拳道？那让我开怀大笑。不是文档的用途吗？

Answer 1

sizes属性决定您在srcset中列出的图片版本将用于当前网页的呈现。

你是对的。如果您已经在断点中定义CSS中的图像大小，那么它就是重复的。但似乎浏览器不支持从CSS中提取该信息并将其用于预先计算图像大小。所以它是目前需要的重复。

此处提供更多信息，并提供有关未来发展的建议：http://ericportis.com/posts/2014/separated/

我今天了解了lazySizes javascript，顺便提一下，这可以做到这一点。它从CSS中提取此信息，并将其放入img的sizes属性中。它对我来说非常有用。