本身不裁剪图片，仅按的media条件选择预裁好的不同构图源图；常见失效原因包括media写在上、缺括号、置于后、断点重叠及顺序错误（须从宽到窄），且必须存在并含src与alt。
picture 标签本身不做任何裁剪，它只负责把预裁好的不同构图图片按 media 条件选出来交给浏览器——所谓“艺术剪裁”，全靠你提前导出 hero-mobile.jpg、hero-tablet.jpg、hero-desktop.jpg 这三张图。
为什么写了 media 却总加载同一张图
不是逻辑写错，而是 <source></source> 的匹配机制被破坏了。浏览器线性扫描，遇到第一个为 true 的就停，后面全忽略。
-
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 宽度命中第一个，第二条永不执行
<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 上。
- 必须存在，且必须带
src和alt属性（<img src="fallback.jpg" alt="首页横幅">） - 不能写成
<img>或<img>，必须是完整闭合标签 - 推荐给
<img>也加srcset和sizes，尤其当 fallback 图也要适配 2x 屏时 - 如果发现“始终只加载
<img src>”，先看 Network 面板：所有<source></source>请求是否返回 404 或blocked:mime-type？
media 和 srcset+sizes 是两层逻辑，别混用
media 控制“用哪一组图”（art direction），srcset+sizes 控制“这一组里选哪个分辨率版本”（DPR 或视口变化下的精细匹配）。
-
sizes必须写在<img>上，不是<source></source>；漏写或语法错（如单位缺失、逗号遗漏）会导致浏览器按默认100vw计算，小屏也可能加载大图 - 一个
<source></source>可以同时有media和srcset，例如：<source media="(min-width: 768px)" srcset="hero-768w.jpg 768w, hero-1536w.jpg 1536w" sizes="(min-width: 768px) 768px, 100vw"></source> -
media优先级高于srcset：浏览器先判断是否启用该<source></source>，再在启用的范围内选分辨率
最容易被忽略的一点：你写的 media="(min-width: 1024px) and (orientation: landscape)" 在桌面浏览器里可能永远不匹配——因为很多桌面环境不报告 orientation，整条 <source></source> 就被跳过，直接 fallback 到 <img src>。艺术剪裁的前提，是每张预裁图都真实可达、路径正确、MIME 类型服务正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
