<picture>标签本身不裁剪图片，仅按<source>的media条件选择预裁剪源图；常见失效原因包括media写在<picture>上、缺括号、<source>置于<img>后、断点重叠及顺序错误（须从宽到窄），且<img>必须存在并含src与alt。
为什么写了media却总加载同一张图
不是逻辑写错，而是匹配机制被破坏了：浏览器从上到下扫描
-
media写在<picture>标签上（如<picture media="(max-width:768px)">）→ 浏览器完全无视 -
media="(max-width: 768px)"少了一对括号 → 写成media="max-width: 768px"就静默失效 -
<source>放在<img>后面 → 浏览器跳过所有<source>，只加载<img src> - 断点重叠，比如同时存在
(min-width: 768px)和(max-width: 768px)→ 768px 宽度命中第一条，第二条永不执行
source顺序必须从宽到窄，不能倒着写
浏览器不“计算最优”，只“取第一个匹配”。顺序错了，小屏设备永远卡在最上面那条规则里。
- ✅ 正确（桌面 → 平板 → 手机）：
<source media="(min-width: 1200px)" srcset="hero-desktop.jpg">、<source media="(min-width: 768px)" srcset="hero-tablet.jpg">、<source media="(max-width: 767px)" srcset="hero-mobile.jpg"> - ❌ 错误（手机规则放最前）：
<source media="(max-width: 767px)" srcset="hero-mobile.jpg">→ 所有≤767px设备都走这条，宽屏图根本不会加载
img是强制 fallback，漏掉或写错会导致页面留白
<img>不是可选装饰，而是语义和降级保障。缺一不可，否则区域就是空的。
- 必须存在，且必须带
src和alt属性（如<img src="hero-fallback.jpg" alt="首页横幅">） - 不能写成
<img />或<img>，必须是完整闭合标签 - 路径必须真实存在；404 不报错，只会静默 fallback —— 调试得靠 Network 面板清缓存后确认实际加载项
- 推荐给
<img>也加srcset和sizes，尤其当 fallback 图也要适配 2x 屏时
<img>、顺序颠倒，就彻底不动。最容易被忽略的，其实是<img>的alt是否语义准确——它不只是给屏幕阅读器看的，也是搜索引擎理解这张图“该看什么”的唯一文本依据。
