picture元素中基于min-width的Media queries无法可靠触发

在使用<picture>标签配合min-width类媒体查询实现响应式图片时，会出现仅中等尺寸图片在中等及以上断点显示，更大尺寸断点从未触发的问题。原本期望它和CSS的min-width表现一致，但大断点无法覆盖首个符合的>=断点。

错误写法（从小到大排列source） #

这种写法下，当视口宽度超过672px后，只会加载Medium图片，更大尺寸的断点永远不会触发：

CSS代码 #

picture {
  aspect-ratio: 2/1;
  display: block;
}

img {
  block-size: auto;
  display: block;
  max-inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

HTML代码 #

<picture>
  <source media="(width < 672px)" srcset="https://placehold.co/2000x1000?text=Small" />
  <source media="(width >= 672px)" srcset="https://placehold.co/2000x1000?text=Medium" />
  <source media="(width >= 1056px)" srcset="https://placehold.co/2000x1000?text=Large" />
  <source media="(width >= 1312px)" srcset="https://placehold.co/2000x1000?text=X-Large" />
  <source media="(width >= 1584px)" srcset="https://placehold.co/2000x1000?text=Max" />
  <source media="(width > 1784px)" srcset="https://placehold.co/2000x1000?text=Max+Plus" />
  <img alt="" height="1250" loading="eager" src="https://placehold.co/2000x1000?text=Fallback" width="2500" />
</picture>

临时解决办法（指定断点范围） #

这种方式虽然能让图片正常加载，但需要给每个断点限定上下范围，违背了min-width查询简洁性的初衷：

CSS代码 #

picture {
  aspect-ratio: 2/1;
  display: block;
}

img {
  aspect-ratio: 2/1;
  block-size: auto;
  display: block;
  max-inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

HTML代码 #

<picture>
    <source media="(width < 672px)" srcset="https://placehold.co/2000x1000?text=Small" />
    <source media="(width >= 672px) and (width < 1056px)" srcset="https://placehold.co/2000x1000?text=Medium" />
    <source media="(width >= 1056px) and (width < 1312px)" srcset="https://placehold.co/2000x1000?text=Large" />
    <source media="(width >= 1312px) and (width < 1584px)" srcset="https://placehold.co/2000x1000?text=X-Large" />
    <source media="(width >= 1584px) and (width < 1784px)" srcset="https://placehold.co/2000x1000?text=Max" />
    <source media="(width > 1784px)" srcset="https://placehold.co/2000x1000?text=Max+Plus" />
    <img alt="" height="1250" loading="eager" src="/images/examples/responsive-671.png" width="2500" />
</picture>

正确写法（从大到小排列source） #

将断点按从最大到最小的顺序排列后，大尺寸断点能正常触发，问题解决：

CSS代码 #

picture {
  aspect-ratio: 2/1;
  display: block;
}

img {
  block-size: auto;
  display: block;
  max-inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

HTML代码 #

<picture>
  <source media="(width > 1784px)" srcset="https://placehold.co/2000x1000?text=Max+Plus" />
  <source media="(width >= 1584px)" srcset="https://placehold.co/2000x1000?text=Max" />
  <source media="(width >= 1312px)" srcset="https://placehold.co/2000x1000?text=X-Large" />
  <source media="(width >= 1056px)" srcset="https://placehold.co/2000x1000?text=Large" />
  <source media="(width >= 672px)" srcset="https://placehold.co/2000x1000?text=Medium" />
  <source media="(width < 672px)" srcset="https://placehold.co/2000x1000?text=Small" />
  <img alt="" height="1250" loading="eager" src="https://placehold.co/2000x1000?text=Fallback" width="2500" />
</picture>

顺序影响的核心原理 #

浏览器处理<picture>内的<source>元素时，是按从上到下的顺序匹配媒体查询：一旦找到第一个符合当前视口条件的<source>，就会直接加载它对应的资源，不会再检查后面的<source>。

在错误的从小到大排列中，当视口宽度≥1056px时，第二个<source>的(width >= 672px)条件同样成立，浏览器会优先匹配这个更早出现的规则，后面的大断点查询根本没机会被触发。

而按从大到小的断点顺序排列时，浏览器会先检查最严格的大尺寸条件，只有当大尺寸条件不满足时，才会继续往下匹配更小的断点，这就实现了和CSSmin-width类似的逻辑——更具体的规则（大断点）优先生效。

内容的提问来源于stack exchange，提问作者Brandon Durham