浏览器按从上到下顺序匹配，首个media为真即加载并停止，故必须从宽到窄排列，否则窄屏规则会拦截所有设备；media值须为合法css媒体查询，否则被静默忽略。
为什么 的 media 顺序必须从宽到窄
浏览器按 <source></source> 从上到下的顺序匹配，遇到第一个为 true 的 media 就立即加载对应资源，不再往后看。所以如果把 media="(max-width: 767px)" 放最前面，所有设备（包括桌面）都会命中它——宽屏规则永远不执行。
常见错误写法：media="768px"（缺括号和媒体特性）、media="tablet"（非法值），这些会导致整个 <source></source> 被静默忽略。
- ✅ 正确顺序示例：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ⚠️ 避免边界重叠：比如同时存在
(min-width: 768px)和(max-width: 768px)，768px 宽度会固定命中前者，行为不可控 - ? 注意：
<picture></picture>自身加media属性完全无效，必须写在<source></source>里
srcset + sizes 如何配合 media 实现 DPR+宽度双重适配
仅靠 media 切换固定图，无法应对高 DPR 设备（如 iPhone 的 2x/3x 屏）。srcset 告诉浏览器“有哪些图”，sizes 告诉它“这张图在当前布局下占多宽”，两者结合才能让浏览器算出需要多少物理像素，再挑最接近的源。
例如一个满屏 banner，在小屏用 375w + 750w（对应 1x/2x），中屏用 768w + 1536w，大屏用 1200w + 2400w：
<picture><source media="(min-width: 1200px)" srcset="banner-1200w.jpg 1x, banner-2400w.jpg 2x"><source media="(min-width: 768px)" srcset="banner-768w.jpg 1x, banner-1536w.jpg 2x"><source media="(min-width: 375px)" srcset="banner-375w.jpg 1x, banner-750w.jpg 2x"><img src="banner-fallback.jpg" alt="首页横幅" sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, 100vw"></source></source></source></picture>
-
sizes不是“该加载多宽的图”，而是“这张图在不同断点下渲染时的 CSS 宽度” - 省略
sizes时浏览器默认按100vw计算，小屏可能误加载大图 -
1x/2x是提示，不是文件名规则；浏览器会结合sizes计算所需像素再匹配
为什么 ![]()
必须放在 最后且带 src 和 alt
<picture></picture> 是容器，自身不渲染也不加载图片；真正起作用的是内部的 <source></source> 和末尾的 <img>。浏览器只按顺序检查 <source></source>，都不匹配就 fallback 到 <img src>。
漏掉 <img> 或写成自闭合 <img>，整个 <picture></picture> 就不显示任何内容——旧版 Safari 甚至可能直接跳过加载。
-
<img>必须有src（否则无兜底）和alt（否则可访问性失败，部分浏览器拒绝加载） -
<source></source>不能有src属性，只认srcset+sizes或media -
<source></source>必须在<img>之前，否则被浏览器忽略
HTTP 404 报错但路径明明存在？先查 MIME 类型
控制台报 Failed to load resource: the server responded with a status of 404 ()，但路径能直接访问，大概率是服务器返回了错误的 MIME 类型——比如把 .webp 当作 text/plain，浏览器直接拒收。
常见于 GitHub Pages、Vercel 默认配置或 Nginx 未显式声明 image/webp 类型。
- 用浏览器开发者工具 Network 面板查看响应头，确认
Content-Type是否为image/webp或image/avif - CDN 或静态托管服务需手动配置 MIME 映射，否则
<source type="image/webp"></source>会静默失效 - 不要依赖文件扩展名自动推断；
type属性必须与实际响应头一致
<source></source>”，而在于每条规则是否真实覆盖目标设备的视口 + DPR 组合，并且所有资源路径、MIME、语法都经得起浏览器加载阶段的校验——少一个 alt，少一个括号，或 MIME 错一位，整套逻辑就退化成一张固定图。
