标签不切换图片，仅由浏览器按顺序匹配首个合法；media必须写在内、带完整括号、从宽到窄排列，否则全被跳过而回退到。
picture 标签本身不“巧”，它只按规则执行；所谓“巧用”，其实是避开浏览器匹配机制的坑，让 <source></source> 真正被选中。
为什么写了 media 却总加载 <img src>
不是代码没写，而是浏览器压根没执行匹配——它跳过了所有 <source></source>，直接 fallback 到 <img>。
-
media="(max-width: 768px)"写成media="max-width: 768px"（漏括号）→ 浏览器静默忽略整条<source></source> -
<source></source>放在<img>后面 → 浏览器不解析，直接跳过 - 所有
media都不匹配（比如断点写成(min-width: 769px)和(max-width: 768px)，但设备刚好是 768.5px）→ 没有命中项，只能 fallback - 服务器返回
image/webp文件，但响应头是Content-Type: image/jpeg→ 浏览器判定格式不匹配，跳过该<source></source>
<source></source> 的顺序为什么必须从宽到窄
浏览器线性扫描，遇到第一个 media 为 true 的就停，后面全丢弃。这不是“最优匹配”，是“首个匹配”。
- ✅ 正确顺序：
<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"></source>→<source media="(min-width: 768px)" srcset="hero-tablet.jpg"></source>→<source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source> - ❌ 错误顺序：
<source media="(max-width: 767px)" ...></source>放最前 → 所有 ≤767px 的设备都卡在这条，宽屏图永远不出现 - ⚠️ 断点别重叠：同时写
(min-width: 768px)和(max-width: 768px)，768px 宽度会命中前者，后者永不触发
<img> 不是可选项，是强制 fallback 节点
漏掉、写错或自闭合，会导致整个区域空白——尤其在 Safari 16.4 之前版本，连错误提示都没有。
- 必须存在，且必须是完整闭合标签：
<img src="fallback.jpg" alt="首页横幅">，不能是<img>或<img> -
src和alt缺一不可；只写alt不写src，结果就是空盒 - 推荐给
<img>也加sizes和srcset，尤其当 fallback 图也要适配 Retina 屏时（例如srcset="fallback@1x.jpg 1x, fallback@2x.jpg 2x"）
什么时候真该用 <picture></picture>，而不是 srcset + sizes
90% 的响应式图片需求其实不需要 <picture></picture>。它只在“内容构图必须变”时才不可替代。
- ✅ 该用：
<source media="(max-width: 480px)" srcset="face-closeup.jpg"></source>（手机裁人脸） +<source media="(min-width: 1200px)" srcset="full-scene.jpg"></source>（桌面展全景） - ❌ 不该用：只是同一张图缩放适配不同宽度 → 直接用
<img srcset="a-400w.jpg 400w, a-800w.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw">更轻、更稳、兼容性更好 - ⚠️ 混用
w和x描述符（如photo.jpg 400w, photo@2x.jpg 2x）→ 整个srcset被忽略，回退到<img src>
最容易被忽略的其实是边界条件：768px 这种临界宽度是否被任一 media 覆盖？<img> 的 src 是否真实可访问？Network 面板里 <source></source> 请求是否返回 404 或 blocked:mime-type？这些不查网络请求，光看 HTML 是看不出问题的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
