标签本身不切换图片，它只是把选择权交给浏览器；media属性必须写在<source>内且语法正确，顺序需从宽到窄，否则浏览器将忽略或仅加载<img src>兜底图。
<source> 的 media 顺序和语法，浏览器才会在加载阶段自动挑出最合适的那张。
为什么写了 media 却没切换？
因为 media 属性必须写在 <source> 里，<picture> 自身加 media 会被完全忽略。常见错误包括：
-
media="max-width: 768px"（缺括号）→ 浏览器静默跳过该<source> -
media="768px"或media="tablet"→ 非法值，整个<source>失效 -
<source>写在<img>后面 → 浏览器直接忽略，只加载<img src> - 所有
<source>的media都不匹配 → 浏览器不会报错，只会默默 fallback 到<img src>
media 的断点顺序为什么必须从宽到窄？
浏览器按从上到下的顺序扫描 <source>，遇到第一个为 true 的 media 就立即加载对应 srcset，不再继续判断。所以：
- ✅ 推荐写法：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ❌ 错误写法：
media="(max-width: 767px)"放最前 → 所有小屏设备永远卡在这条，宽屏规则根本没机会执行 - ⚠️ 避免边界重叠：比如
(min-width: 768px)和(max-width: 768px)并存，768px 宽度会命中第一个，行为不可控
如何让 <img> 真正成为可靠 fallback？
<img> 不是可选装饰，而是强制兜底节点。漏掉或写错会导致图片区域空白：
- 必须存在，且必须带
src和alt属性（否则可访问性失败，旧版 Safari 可能不触发加载） - 不能写成自闭合：
<img />或<img>→ 必须是<img src="..." alt="..."> - 推荐给
<img>也加srcset和sizes，尤其当 fallback 图也要适配 2x 屏时 - 如果发现“始终只加载
<img src>”，先检查 Network 面板：是否所有<source>请求都返回404或(blocked:mime-type)？
media 和 srcset + sizes 是什么关系？
它们不在同一层级，也不互斥，但职责分明：
立即学习“前端免费学习笔记（深入）”；
-
media控制“用哪一组图”（art direction 场景，比如桌面横幅 vs 手机竖构图） -
srcset+sizes控制“这一组里选哪个分辨率版本”（DPR 或视口宽度变化下的精细匹配） -
sizes必须写在<img>上，不是<source>；漏写或语法错（如单位缺失、逗号遗漏）会导致浏览器按默认100vw计算，小屏也可能加载大图 - 一个
<source>可以同时有media和srcset，例如：<source media="(min-width: 768px)" srcset="hero-768w.jpg 768w, hero-1536w.jpg 1536w" sizes="(min-width: 768px) 768px, 100vw">
<source> 的 media 都不匹配时，浏览器不会尝试“修正”或“降级匹配”，它只是安静地加载 <img src> —— 所以你的兜底图，得真能撑住所有意外情况。
