html - 在 标签中组合不同的类型和尺寸

Question

我想使用 <picture> 提供响应式图像标签。

我想实现的是:

如果视口(viewport)为 x 则为浏览器“a.webp”提供服务，如果不支持 webp 则为“a.png”提供服务如果视口(viewport)为 y 则为浏览器提供“b.webp”，如果它不支持 webp 则提供“b.png”。

我尝试了几种方法，但似乎都不起作用。有什么想法吗？

<picture>
  <source media="(min-width: 1125px) 1125px, 100vw" srcset="img/phone/happy_girl_top-phone.webp 414w, img/happy_girl_top.webp 1125w">
  <source media="(min-width: 1125px) 1125px, 100vw" srcset="img/phone/happy_girl_top-phone.png 414w, img/happy_girl_top.png 1125w">
  <img class="img-fluid" alt="top background" src="img/happy_girl_top.png">
</picture>

Answer 1

你的 media 的内容属性无效 media queries .

这是嵌入内容的官方 HTML 文档:https://html.spec.whatwg.org/multipage/embedded-content.html

<picture> 的语法元素应如下所示:

body {margin: 0;}

<picture>
  <source srcset="https://via.placeholder.com/414x200 414w" 
          media="(max-width: 414px)">
  <source srcset="https://via.placeholder.com/800x200 800w" 
          media="(max-width: 800px)">
  <source srcset="https://via.placeholder.com/1150x200 1150w" 
          media="(min-width: 801px)">
  <img class="img-fluid" alt="top background" src="https://via.placeholder.com/1125x200">
</picture>