指定多个槽宽度

Katie Hempenius
Katie Hempenius
X

试用此演示

  • 如需预览网站，请按查看应用。然后按全屏 全屏。

  • 在不同大小的浏览器窗口中重新加载应用，您会看到浏览器在不同大小下加载不同的图片并使用不同的布局。

查看代码

  • 查看 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%（百分比不能与 sizes 属性一起使用）