picture标签本身不裁剪图片，仅按media条件选择预裁切的源图；常见失效原因包括media写在上、缺括号、置于后、断点重叠及顺序错误（须从宽到窄），且必须存在并含src与alt。
picture 标签本身不做裁剪，它只负责选图；你看到的“不同分辨率下裁剪”，其实是你提前准备了多张已裁好的图，再靠 media 和 srcset 把它们精准分发出去。
为什么写了 media 却总加载同一张图
这不是浏览器不工作，而是匹配逻辑被破坏了：
-
media写在<picture></picture>标签上（如<picture media="(max-width:768px)"></picture>）→ 浏览器直接忽略整个属性 -
media="(max-width: 768px)"缺少括号 → 写成media="max-width: 768px"就静默失效 -
<source></source>放在<img>后面 → 浏览器跳过所有<source></source>，只加载<img src> - 断点重叠，比如同时存在
(min-width: 768px)和(max-width: 768px)→ 768px 宽度行为未定义，Safari 可能跳过，Chrome 可能命中第一个 -
<source></source>顺序不是从宽到窄 → 浏览器线性扫描，遇到第一个为 true 就停，后面全丢弃
<source></source> 的 media 顺序必须严格从宽到窄
浏览器不“计算最优”，只“取第一个匹配”。顺序错了，小屏设备永远卡在最上面那条规则里：
- ✅ 正确（桌面 → 平板 → 手机）：
<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)" srcset="hero-mobile.jpg"></source>→ 所有 ≤767px 的设备都走这条，宽屏规则根本没机会触发
<img> 不是可选装饰，是强制 fallback 节点
漏掉、写错或自闭合，会导致图片区域空白，尤其在 Safari 或低版本 iOS 上：
- 必须存在，且必须是完整闭合标签：
<img src="fallback.jpg" alt="首页横幅">，不能写成<img>或<img> -
alt必须写，它是唯一参与可访问性的文本，<source></source>不读给屏幕阅读器 - 推荐也给
<img>加srcset和sizes，尤其当 fallback 图也要适配 2x 屏时（例如srcset="fallback-1x.jpg 1x, fallback-2x.jpg 2x"） - 如果发现“始终只加载
<img src>”，先看 Network 面板：所有<source></source>请求是否返回 404 或blocked:mime-type？
混用 x 和 w 描述符会直接导致整个 srcset 失效
sizes 必须写在 <img> 上，不是 <source></source>；漏写或语法错（如单位缺失、逗号遗漏）会导致浏览器按默认 100vw 计算，小屏也可能加载大图：
- 不要在同一
srcset里混用1x和400w→ 浏览器直接忽略整条srcset，回退到<img src> -
sizes是字符串，格式必须合法，例如：sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" - 如果你只做 art direction（不同构图），
srcset里可以只放一个路径，不加w或x；但如果想同时支持 Retina 屏，就得补上2x版本
真正起作用的是浏览器在加载阶段的自动匹配，不是 JS 控制；写对结构和断点，它就自己动，但写错一点，就彻底不动——尤其是 <img> 缺失、media 括号漏写、<source></source> 顺序颠倒这三处，最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
