<img>必须置于<picture>末尾且含src和alt，否则导致留白、降级失效；media属性不可写在<picture>上，<source>须在<img>前，断点需无间隙、无重叠、单位完整。
必须把 <img> 放在 <picture> 最后，且带 src 和 alt；否则页面留白、旧浏览器不显示、无障碍失效——这不是可选项，是规范强制要求。
为什么写了 media 却只加载一张图
不是浏览器不执行，而是匹配逻辑被破坏了：
-
media写在<picture>标签上（如<picture media="(max-width: 768px)">）→ 浏览器完全忽略 -
media="max-width: 768px"缺括号 → 静默失效，该<source>被跳过 -
<source>放在<img>后面 → 浏览器直接终止解析，所有<source>失效 - 所有
media条件都不满足（比如断点有缝隙：只写了min-width: 769px和max-width: 767px）→ 浏览器默默 fallback 到<img src>，你根本看不到提示
<source> 的顺序和断点怎么写才不翻车
浏览器是线性扫描、短路匹配：遇到第一个为 true 的就停，后面的全丢弃。这不是“选最优”，是“取首个”。
- 宽屏规则必须放最前，窄屏兜底放最后：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - 避免边界重叠：不要同时存在
min-width: 768px和max-width: 768px，768px 宽度行为不可控（Chrome 和 Safari 可能不同） - 单位不能省：
768是非法媒体查询，必须写成768px - 别用
orientation: landscape做条件，iOS Safari 行为不稳定，容易失效
srcset 和 sizes 到底该写在哪
srcset 和 sizes 不是万能补丁，它们的作用位置和组合方式有硬约束：
立即学习“前端免费学习笔记（深入）”；
-
srcset可以写在<source>或<img>上，但语义不同：
–<source>的srcset只用于按media匹配后取资源，2x描述符被完全忽略
–<img>的srcset才真正参与 DPR 匹配（1x/2x/3x）或宽度匹配（400w） -
sizes只能写在<img>上，写在<source>里会被忽略 - 如果
<img>上写了sizes，整个srcset就切换到宽度匹配模式，2x描述符失效——按钮图标这类固定尺寸元素，通常不该加sizes - 混用
w和x（如srcset="a.jpg 400w, b.jpg 2x"）→ 整个值被解析为无效，回退到src
最容易被跳过的三个点：没写 <img>、media 缺括号、<source> 顺序反了。这些错误不会报错，只会让图片区域变空或永远加载 fallback 图——验证时一定打开 Network 面板清缓存后看实际请求 URL，别只信代码看起来对不对。
