指定多个槽宽度

Katie Hempenius
Katie Hempenius

试用此演示版

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

  • 在大小不同的浏览器窗口中重新加载应用,以查看浏览器加载情况 不同的图片以及在不同的浏览器尺寸下使用不同的版式。

查看代码

  • 查看 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 属性的值表示图片显示宽度为: “视口宽度的 100%”宽度不超过 480px 的视口,“视口的 50%” 宽度"在 481–1024 像素宽的屏幕上,在宽度大于 1024 像素的屏幕上为 800 像素。这些 宽度与 CSS 中指定的宽度一致。

指定多个广告位宽度的功能可以适应 设置不同的样式(即图片宽度)。

如何指定多个广告位宽度

  • 使用逗号分隔列表来指定多个广告位宽度。每个列表项 包含媒体条件(例如 max-widthmin-width) 和槽宽度。
  • 此列表中的最后一项是默认广告位宽度。这是默认值 因此您无需指定媒体条件
  • 您可以根据需要列出任意数量的广告位宽度,即 srcset 并不重要。
  • 可以使用各种单位指定广告位宽度。以下全是 有效宽度:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

以下值不是有效的宽度:

  • 25%(百分比不能与尺寸属性一起使用)