<picture>：如果多个媒体查询匹配，哪个优先？

Question

<picture>
  <source srcset="smaller.image" media="(max-width: 799px)">
  <source srcset="bigger.image"  media="(min-width: 800px)">
  <source srcset="exactly.image" media="(width: 801px)">
</picture>

在此示例中，如果视口的宽度恰好是801px。首选哪种图像，为什么？

bigger.image或exactly.image？

查询的指定是考虑的一部分吗？或<source />元素的顺序？

Answer 1

According to the Specification将使用文件bigger.image，因为它是第一个与当前视口匹配的查询：

  

媒体属性也可能存在。如果存在，则该值必须包含有效的媒体查询列表。如果该值与环境不匹配，则用户代理将跳至下一个源元素。