source的media属性按从大到小顺序写min-width，因浏览器自上而下顺序匹配、遇真即停；宽屏规则若不置顶，小屏设备会误匹配兜底项导致高清资源无法加载。
直接结论：用 <source> 的 media 属性配合 min-width，按从大到小顺序写，宽屏规则必须放最前，否则小屏设备可能被误匹配。
为什么 min-width 要从大往小写？
浏览器对 <source> 是**自上而下顺序匹配、遇真即停**。如果把 media="(max-width: 767px)" 放在最前面，那所有视口宽度 ≤ 767px 的设备（包括手机、竖屏平板、甚至某些缩放后的桌面窗口）都会命中它，后面的 min-width: 1200px 根本没机会执行。
正确逻辑是“优先满足高端设备”：
-
media="(min-width: 1440px)"→ 2K/4K 屏幕，加载 3200w 或 @3x 图 -
media="(min-width: 1200px) and (max-width: 1439px)"→ 普通桌面，加载 1920w 或 @2x 图 -
media="(min-width: 768px) and (max-width: 1199px)"→ 平板横屏，加载 1024w 或 @2x 图 -
media="(max-width: 767px)"→ 手机+竖屏平板，作为兜底（必须存在）
media 写在 <picture> 上会怎样？
无效。HTML 规范中 <picture> 标签本身没有 media 属性——这是最常踩的坑。写了 <picture media="..."></picture>，浏览器直接忽略该属性，后续所有 <source> 都按默认顺序走，但语义已错乱。
立即学习“前端免费学习笔记（深入）”；
真正起作用的是子元素 <source> 的 media。每个 <source> 可独立带 media、srcset、type，三者组合决定加载条件。
常见错误现象：
-
<source srcset="a.jpg">没写media→ 它无条件生效，挡住后面所有<source> - 多个
<source>的media条件重叠（比如都写min-width: 768px）→ 只有第一个被加载 - 漏掉末尾的
<img>或它没写src→ 图片完全不显示（不是降级，是空白）
高清图怎么配 srcset：用 w 还是 x？
取决于你要解决的问题：
- 适配不同视口宽度下的**显示尺寸**（比如大屏显示更宽的图），用
w+sizes：srcset="hero-1200w.jpg 1200w, hero-2400w.jpg 2400w"，再在<img>上写sizes="(min-width: 1200px) 100vw, 50vw" - 适配不同设备像素比（Retina / 2x / 3x 屏），用
x：srcset="hero-1200.jpg 1x, hero-2400.jpg 2x, hero-3600.jpg 3x" -
不能混用：同一
srcset中同时出现1200w和2x，浏览器解析失败，直接回退到<img>的src
大屏高清方案推荐组合：media="(min-width: 1200px)" + srcset="hero-1920.jpg 1x, hero-3840.jpg 2x"，既切尺寸又补像素密度。
容易被忽略的硬性要求
三个条件缺一不可，否则图片不显示或强制降级：
-
<picture>内必须以<source>开头，但**最后必须紧跟一个<img>**，且该<img>必须有src和alt，不能只靠srcset - 所有
<source>的media表达式必须是合法 CSS 媒体查询，不能简写成media="768px"或media="desktop" -
<img>不能带media或type，它是纯 fallback；它的src应该是兼容性最强的格式（如.jpg），且尺寸适合最小断点
实际部署时，建议用 Chrome DevTools 的 “Device Toolbar” 切换 viewport 宽度，再看 Network 面板确认加载的是哪个资源——别只信视觉表现，要验真实请求。
