指定多个槽宽度

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 中列出的图片数量无关紧要。

• 可以使用各种单位指定槽宽。以下是所有有效的宽度：

• 100px

• 33vw

• 20em

• calc(50vw-10px)

以下宽度无效：

• 25%（百分比不能与尺寸属性搭配使用）