picture标签本身不裁剪图片，仅按media条件选择预裁剪的源图；常见失效原因包括media写在<picture>上、缺括号、<source>置于<img>后、断点重叠及顺序错误（须从宽到窄），且<img>必须存在并含src与alt。
picture 标签本身不裁切图片，它只负责按条件选图；真正实现“移动端裁切、桌面端全景”的前提是——你得提前准备好裁切好的多张源图。
为什么写了 media 却总加载同一张图
这不是浏览器不支持 picture，而是条件没被正确识别或匹配逻辑出错：
-
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 宽度行为未定义，Chrome 可能命中第一个，Safari 可能跳过
source 的顺序必须从宽到窄
浏览器是线性扫描，遇到第一个为 true 的就停，不会继续比对。顺序错了，宽屏设备永远拿不到桌面图：
- ✅ 正确（桌面 → 平板 → 手机）：
<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">→ 所有设备都走这条，后面两条完全无效
img 标签不是可选的，是强制存在的兜底
<img> 必须存在，且必须带 src 和 alt：
立即学习“前端免费学习笔记（深入）”；
- 它是语义基础：屏幕阅读器只读
<img>的alt，<source>不参与可访问性 - 它是降级保障：不支持
picture的旧浏览器（如 IE）直接忽略整个<picture>，只渲染<img> - 它也是 fallback：当所有
<source>的media都不匹配时（比如视口宽度刚好卡在断点缝隙），浏览器会加载<img src>
容易被忽略的 MIME 类型与服务器响应头
<source> 被跳过、只显示 <img>，常因 type 声明和实际文件类型不一致：
-
type="image/webp"必须对应服务器返回的Content-Type: image/webp，大小写、拼写、空格全要一致 -
type="webp"或type="image/jpg"都是非法值，会被浏览器静默丢弃 - Network 面板里看到
blocked:mime-type或 404，基本就是type和服务配置对不上 - 用 WebP 时建议搭配
<source type="image/webp">+<source type="image/jpeg">+<img>三层 fallback，确保兼容性
真正麻烦的从来不是写几行 HTML，而是保证每张裁切图都精准对应设备意图、每个 media 断点无歧义、每个 type 和服务器响应头严丝合缝——漏掉任意一环，picture 就退化成一个摆设容器。
