用 <picture> 实现自适应必须同时满足三个条件：每个 <source> 的 media 是合法 CSS 媒体查询、srcset 有值且语法正确、末尾 <img> 必须带 src 和 alt，缺一则静默回退到 <img src>。
直接说结论：用 <picture> 实现自适应，不是“写对标签就行”，而是必须同时满足三个条件：每个 <source> 的 media 是合法 CSS 媒体查询、srcset 有值且语法正确、末尾的 <img> 必须带 src 和 alt——漏一个，浏览器就静默回退到 <img src>，你根本看不出哪里错了。
为什么写了 <picture> 却始终只加载 <img> 的图
这是最常发生的失效场景，表面看结构完整，实际浏览器一条 <source> 都没选中：
-
media值缺括号，比如写成media="max-width: 768px"（正确是media="(max-width: 768px)"），浏览器直接忽略该<source> -
<source>只有srcset没配media或type，它不参与匹配，等于白写 - 服务器返回的
Content-Type和type="image/webp"不一致（比如返回text/plain），Chrome 显示blocked:mime-type -
<img>缺src：页面留空，不报错，但没图
按视口宽度切图时，media 断点怎么写才不重叠不遗漏
断点必须互斥、顺序严格、括号完整，否则高 DPR 设备可能永远卡在第一个匹配项里：
- ✅ 推荐写法：
media="(max-width: 479px)"→media="(min-width: 480px) and (max-width: 1023px)"→media="(min-width: 1024px)" - ❌ 错误示例：
media="(min-width: 768px)"和media="(min-width: 1024px)"重叠，1024px 宽度设备会命中前者，跳过后者 - 移动端优先建议用开区间：小屏用
max-width: 479px，中屏从480px起，避免边界模糊 -
<source>按顺序匹配，第一个满足即停，所以宽屏规则要放在最后
想适配 Retina 屏（2x/3x），只靠 <picture> 不行
<picture> 本身不识别 DPR，真正起作用的是 srcset 中的 x 描述符，且必须写在生效的 <source> 或 <img> 上：
立即学习“前端免费学习笔记（深入）”；
- 必须用
1x/2x/3x，不能混用w描述符（如400w）——除非你同时配了sizes并想按布局宽度算 - 正确写法：
srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x" - 顺序很重要：把
3x放最后，否则2x设备可能永远选不到2x图 - 如果所有
<source>都没匹配上，最终靠<img>的srcset救场，所以它的srcset也得写全
最容易被忽略的点：没有 <img> 的 src，或者 media 里少了一对括号，整个 <picture> 就形同虚设。浏览器不会警告，只会安静地加载那张兜底图——而你还在 Network 面板里找“为什么没发请求”。
