Katie Hempenius
试用此演示
如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）
。在不同大小的浏览器窗口中重新加载应用，看看浏览器在不同大小的窗口中加载不同的图片并使用不同的布局。
查看代码
- 请查看
index.html，了解实现此功能的代码：
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
发生了什么情况？
sizes 属性的值决定了图片显示宽度：在宽度不超过 480 像素的视口中，图片显示宽度为“视口宽度的 100%”；在宽度为 481-1024 像素的屏幕上，图片显示宽度为“视口宽度的 50%”；在宽度超过 1024 像素的屏幕上，图片显示宽度为 800 像素。这些宽度与 CSS 中指定的宽度一致。
能够指定多个槽宽度，可让网页布局针对不同的视口大小使用不同的样式（即图片宽度）。
如何指定多个槽宽
- 使用英文逗号分隔列表来指定多个槽宽。除最后一项外，每个列表项都由媒体条件（例如
max-width或min-width）和槽宽组成。 - 此列表中的最后一项是默认的槽宽。这是默认值，因此您无需指定媒体条件。
- 您可以列出任意数量的广告位宽度，
srcset中列出的图片数量无关紧要。 可以使用各种单位指定槽宽。以下是所有有效的宽度：
100px33vw20emcalc(50vw-10px)
以下宽度无效：
25%（百分比不能与尺寸属性搭配使用）