media属性值必须加括号，否则被静默忽略；断点顺序须从宽到窄；必须保留带src的<img>；type对应的Content-Type需服务端正确配置。
media属性值必须加括号，否则整个被静默忽略
浏览器只认标准 CSS 媒体查询语法，media="max-width: 768px" 这种写法看起来合理，但实际会被完全跳过——它缺了外层括号。你改了断点数值，却没补括号，<source> 就形同虚设。
常见错误现象：所有设备都加载 <img src> 的兜底图，DevTools Network 面板里看不到任何 srcset 图片请求。
- ✅ 正确写法：
media="(max-width: 576px)"、media="(min-width: 577px) and (max-width: 992px)" - ❌ 错误写法：
media="max-width: 576px"（缺括号）、media="576px"（非法值）、media="screen and (max-width: 576px)"（冗余且部分浏览器不兼容） - 验证方法：在 DevTools 的 Elements 面板里选中
<source>，看右侧 Styles 面板是否显示 “Applied media queries”；不显示 = 没生效
断点顺序必须从宽到窄，否则高分辨率设备永远拿不到大图
浏览器按 <source> 出现顺序逐个匹配，命中第一个就停。如果你把小屏规则放在最上面，比如 media="(max-width: 576px)" 在前，那所有宽度 ≤576px 的设备（包括 iPhone SE）会命中它，后面 min-width: 993px 的规则根本不会执行。
使用场景：新闻页三端适配（手机/平板/桌面），需严格对应项目已有的 CSS 断点逻辑，否则样式和图片错位。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐顺序（互斥、无重叠）：
<source media="(min-width: 993px)" srcset="desk.jpg">→<source media="(min-width: 577px) and (max-width: 992px)" srcset="tab.jpg">→<source media="(max-width: 576px)" srcset="mob.jpg"> - ❌ 危险顺序：
max-width: 576px放第一，min-width: 993px放最后 → 大屏设备永远走不到最后一项 - 性能影响：顺序错不仅导致图片错配，还会让高 DPR 设备（如 MacBook Pro）加载低分辨率图，视觉模糊
必须保留 <img src>，且不能省略 src 属性
<picture> 不是独立渲染单元，它完全依赖内部的 <img> 作为语义终点和降级出口。漏掉 <img> 或写了但没填 src，页面就留白——不报错，也不警告，只是什么也不显示。
容易踩的坑：重构时只改 <source>，顺手删了 <img>，或把 src 写成 data-src 之类非标准属性。
- ✅ 必须存在：
<img src="fallback.jpg" alt="描述">，且src是真实可访问路径 - ❌ 常见失效点：
<img >（浏览器无视）、<img src="">（空路径，404）、<img>（无 src，静默失败） - 兼容性注意：某些旧版 Safari 对
srcset支持弱，全靠<img src>保底，删它等于放弃兼容
服务器返回的 Content-Type 必须匹配 type 属性
当你用 type="image/webp" 指定格式时，浏览器会检查服务端响应头里的 Content-Type。如果返回的是 text/plain 或 application/octet-stream，Chrome 会标记为 (blocked:mime-type) 并跳过该 <source>，直接回退到 <img>。
这不是前端能绕开的问题，改 HTML 无效，必须后端配合。
- ✅ 正确做法：WebP 图片由 Nginx/Apache 配置正确 MIME 类型，例如 Nginx 加
types { image/webp webp; } - ❌ 典型错误：本地开发用 file:// 打开 HTML → 所有
type判定失败；或 CDN 缓存了旧响应头，未刷新 - 验证方式：在 Network 面板点开某张 WebP 请求，看 Response Headers 里
Content-Type: image/webp是否存在且准确
真正卡住人的从来不是“怎么写”，而是括号、顺序、src、响应头这四个点里任意一个出错，都会导致整个 <picture> 静默失效——表面看着结构完整，实则一张额外图都没加载。改断点前，先扫一遍这四条，比反复调样式快得多。
