不是响应式图片的魔法标签，而是将选择权交给浏览器：必须正确书写 的 media（完整媒体查询）、type（标准 MIME 类型）及顺序，且 为必需 fallback；否则浏览器静默忽略或仅加载 fallback。
直接说结论： <picture></picture> 不是“让图片变响应式”的魔法标签，它只是把选择权交给浏览器——你得写对 <source></source> 的条件、顺序和格式，否则浏览器要么只加载一张图，要么干脆 fallback 到 <img src alt="HTML中picture响应式图片 HTML中picture标签多源适配" > 而你还不知道。
media 属性必须是完整媒体查询，不能省括号或关键字
常见错误是写成 media="max-width: 768px" 或 media="768px"，这会让整个 <source></source> 被浏览器静默忽略。浏览器只认标准 CSS 媒体查询语法。
- ✅ 正确写法：
media="(max-width: 768px)"、media="(min-width: 1441px)"、media="(prefers-color-scheme: dark)" - ❌ 错误写法：
media="max-width: 768px"（缺括号）、media="small"（非标准值）、media="screen and (max-width: 768px)"（虽合法但冗余，<source></source>默认只作用于屏幕媒体） - 多个
<source></source>的media条件如果重叠（比如同时写了(max-width: 768px)和(max-width: 1024px)），浏览器只取第一个匹配的，后面的直接跳过——这不是 bug，是设计行为
srcset + type 组合才是现代格式降级的关键
想让支持 WebP 的设备加载 .webp，不支持的退到 .jpg，光靠文件名或路径没用，必须靠 type 属性触发 MIME 类型判断。
-
type值必须是标准 MIME 类型，如image/webp、image/avif、image/jpeg；写成type="webp"或type="jpg"会失效 - 服务器返回的
Content-Type必须匹配type值，否则即使路径对、格式对，浏览器也会跳过该<source></source> - 顺序即优先级：所有
image/webp的<source></source>必须排在image/jpeg之前，因为浏览器从上到下匹配，一旦找到支持的 type + 满足 media 就停止
img 标签不是可选的，它是强制兜底且必须带 src
<img alt="HTML中picture响应式图片 HTML中picture标签多源适配" > 在 <picture></picture> 里不是装饰，而是浏览器找不到任何匹配 <source></source> 时的唯一 fallback。漏掉它，或者只写 <img alt="..."> 而不写 src，会导致图片区域空白或仅显示 alt 文本。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML中picture响应式图片 HTML中picture标签多源适配" >必须存在，且必须含src和alt属性 -
<img alt="HTML中picture响应式图片 HTML中picture标签多源适配" >上可以（也推荐）加sizes和srcset，用于进一步优化其自身加载逻辑，尤其是当它作为 fallback 也要适配 DPR 时 - 开发时如果发现“始终只加载
<img src alt="HTML中picture响应式图片 HTML中picture标签多源适配" >的图”，先检查 Network 面板里所有<source></source>的请求是否 404 或 status 为 `(blocked:mime-type)` —— 很可能是 type 写错或服务器 content-type 不匹配
Chrome DevTools 里看不到切换？先关缓存再硬刷
浏览器对 <source></source> 的选择结果不会在 Elements 面板里高亮哪条生效，Network 面板里也容易被缓存干扰。你以为没切，其实只是缓存还在用旧资源。
- 打开 DevTools → Network → 勾选
Disable cache→Cmd+Shift+R（Mac）或Ctrl+F5（Win）硬刷新 - 在 Network 面板过滤
Img，看实际加载的是哪个路径；注意区分是<source></source>还是<img alt="HTML中picture响应式图片 HTML中picture标签多源适配" >发起的请求 - 用 Device Toolbar 切换预设尺寸（如 iPhone SE、iPad Pro）比手动缩放窗口更可靠，因为 media 查询依赖 viewport width，不是浏览器窗口宽
最易被忽略的一点：你写的 media 和 type 都对，但服务器没配对 WebP 文件返回 image/webp 的 Content-Type，浏览器就当它不存在——这种问题不会报错，只会安静地跳过，然后默默加载 <img alt="HTML中picture响应式图片 HTML中picture标签多源适配" > 的 fallback。
