是浏览器加载阶段的资源调度器，非配图工具；写错顺序、漏掉或media语法不合法会导致图片不加载而页面留白。常见失效原因包括：media缺括号被静默忽略、置于之后被跳过、断点重叠致高分辨率设备始终命中首条规则、所有media不匹配时回退至但未注意其是否可访问。
<picture></picture> 不是“配图”工具，它是浏览器加载阶段的资源调度器——写错顺序、漏掉 <img>、media 语法不合法，图片就根本不会加载，页面留白你也看不到报错。
为什么写了 <source></source> 却只显示 fallback 图
常见现象：Network 面板里只看到 <img src> 的请求，所有 <source></source> 都没发；或者小屏设备加载了桌面大图。
-
media值缺括号，比如写成media="max-width: 768px"→ 浏览器静默忽略整条<source></source> -
<source></source>写在<img>后面 → 浏览器跳过，直接用<img> - 断点重叠，比如同时存在
min-width: 768px和min-width: 1024px→ 1024px 设备永远命中第一条，第二条永远不会触发 - 所有
media都不匹配（例如用户禁用了prefers-color-scheme，又没写兜底media）→ 自动回退到<img>，但你可能根本没注意它是否加载成功
<source></source> 的 media 顺序怎么排才不翻车
浏览器从上到下扫描，第一个 media 返回 true 就停，后面全丢弃。这不是“多选”，是“单选+短路”。
- 宽屏优先：先写
media="(min-width: 1200px)"，再写media="(min-width: 768px)"，最后写media="(max-width: 767px)" - 别把窄屏放最前：如果
media="(max-width: 767px)"在第一行，那 1920px 屏幕也会命中它 - 横竖屏场景下，
(orientation: landscape)和(orientation: portrait)可以共存，但 iOS Safari 对后者支持不稳定，建议只用于辅助判断，别单独依赖 - 暗色模式要加
no-preference兜底：显式写media="(prefers-color-scheme: no-preference)"指向浅色图，比靠<img>更可控
srcset 和 sizes 到底该写在哪
sizes 只能写在 <img> 上，<source></source> 里写的会被忽略；srcset 则每个 <source></source> 和 <img> 都可以有，且互不影响。
- 用
x描述符（如"logo@2x.png 2x"）适配设备像素比：每个<source></source>的srcset里可独立写，不用和别的 source 对齐 - 用
w描述符（如"hero-800w.jpg 800w"）适配视口宽度：必须配sizes，且sizes必须写在<img>标签上，例如sizes="(max-width: 768px) 100vw, 50vw" - 别混用
w和x：同一srcset里出现"a.jpg 800w, b@2x.png 2x"→ 整个值被浏览器忽略，直接 fallback -
<img>的src必须存在且可访问：旧版 Safari（16.4 之前）完全靠它渲染，空src或 404 就是白屏
最容易被跳过的其实是服务器配置：type="image/webp" 写了，但服务端返回的 Content-Type 是 image/jpeg，Chrome 会标为 blocked:mime-type，静默降级——查 Network 面板的 Response Headers 才能确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
