时间戳

首页 > 解决方案 > : 如果多个媒体查询匹配，哪个优先？

html - : 如果多个媒体查询匹配，哪个优先？

问题描述

<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 />元素的顺序？

标签： htmlmedia-queriesresponsive-imagessrcset

解决方案

根据规范bigger.image，将使用该文件，因为它是与当前视口匹配的第一个查询：

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

推荐阅读