<picture>断点配错会导致退化为静态图，media必须写在<source>内且按宽到窄排序，括号不可省略，值需与CSS视口一致，src为必需项，w描述符需配sizes，须实测验证。
断点配错，<picture> 就退化成一张静态图——浏览器根本不会按设备宽度选图，只会加载 <img> 的 src。
media 必须写在 <source> 里，不能写在 <picture> 上
浏览器只认 <source media="...">，写在 <picture> 标签上（比如 <picture media="(max-width:768px)">）会被完全忽略，连警告都没有。
- ✅ 正确：
<source media="(min-width: 1200px)" srcset="hero-desk.jpg"> - ❌ 错误：
<picture media="(min-width: 1200px)">—— 这行没用 - ❌ 错误：
<source media="max-width: 768px">—— 缺括号，静默失效
断点顺序必须从宽到窄，否则高分辨率图永远不加载
浏览器从上到下扫描 <source>，匹配第一个就停。如果小屏规则放最前，所有设备都卡在那条上。
- ✅ 推荐顺序：
min-width: 1200px→min-width: 768px→max-width: 767px - ❌ 危险顺序：
max-width: 767px放第一 → 768px 宽的 iPad 也走它，大图白配 - ⚠️ 注意：不要让断点重叠，比如同时存在
(min-width: 768px)和(max-width: 768px)，768px 视口只命中前者，后者永不触发
断点值要和 CSS 实际生效的视口宽度一致
media 查的是 viewport width（CSS 像素），不是设备物理宽度或 DPR。如果你 CSS 用 48em 做断点，<source> 里也该用 (min-width: 48em)，别混用 px 和 em。
立即学习“前端免费学习笔记（深入）”；
- 避免间隙：比如
max-width: 480px后直接写min-width: 769px，中间 481–768px 的宽度会跳过所有<source>，直降<img src> - 推荐覆盖写法：
(max-width: 480px)、(min-width: 481px) and (max-width: 768px)、(min-width: 769px) -
<img>的src不是可选的——它是语义必需项，也是不支持<picture>的老浏览器唯一能加载的图
要不要加 sizes？取决于你是否用 w 描述符
如果 srcset 里用的是 w 描述符（比如 "small.jpg 480w, medium.jpg 768w"），就必须配 sizes，否则浏览器无法换算出该加载哪张；如果只用 x 描述符（如 "small.jpg 1x, small@2x.jpg 2x"），sizes 可省略。
- ✅ 配合 w 描述符：
<source srcset="a.jpg 480w, b.jpg 768w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - ❌ 忘写 sizes：
srcset里的w值就失去意义，浏览器可能随意选图 - ? 小技巧：用
width和height属性预设尺寸，能防止布局偏移（CLS）
最容易被忽略的一点：断点不是“写完就跑”，得真机或 DevTools 设备模拟器里拖动宽度反复验证——因为媒体查询生效与否，只取决于那一刻的 viewport width，而不是你“觉得应该”。
