是声明式资源选择容器，非组件；写错media顺序、漏或media语法非法（如缺括号、无单位）会导致全部被忽略，仅加载。
直接说结论：<picture></picture> 不是“组件”，它没有 JavaScript 行为，也不封装逻辑；它只是一个声明式资源选择容器，浏览器按规则自动加载——写错顺序、漏掉 <img>、media 语法非法，它就完全不工作。
为什么写了 <source></source> 却只加载一张图
常见错误不是代码没写，而是浏览器根本没执行匹配逻辑：
-
media="max-width: 768px"缺括号 → 写成media="max-width: 768px"才合法，media="768px"是无效媒体查询，该<source></source>被静默忽略 -
<source></source>写在<img>后面 → 浏览器直接跳过，只加载<img src> - 所有
<source></source>的media都不匹配 → 浏览器不报错，默默 fallback 到<img src>，你得去 Network 面板清缓存确认实际加载项
<source></source> 的顺序和断点怎么写才不翻车
浏览器从上到下扫描，遇到第一个 media 为 true 的就停，不会继续判断：
- ✅ 正确：先
media="(min-width: 1200px)"，再media="(min-width: 768px)"，最后media="(max-width: 767px)" - ❌ 错误：把
media="(max-width: 767px)"放最前 → 小屏设备永远卡在这条，宽屏规则根本没机会触发 - ⚠️ 避免边界重叠：比如同时存在
(min-width: 768px)和(max-width: 768px)，768px 宽度会命中第一个，行为不可控 - 断点值必须带单位：
768无效，768px才合法；tablet这类非标准关键字也无效
<img> 不是可选的，它是强制 fallback
漏掉它，或只写 <img alt=""> 而不带 src，会导致整个区域空白：
-
<img>必须是<picture></picture>的最后一个子元素，且必须含src和alt属性 - 不能是自闭合写法：
<img>或<img>都无效，必须写成<img src="fallback.jpg" alt="描述"> - 旧版 Safari（16.4 之前）完全依赖
<img src>渲染，缺了就白屏 - 推荐在
<img>上也加sizes和srcset，尤其当它作为 fallback 也要适配高 DPR 时
什么时候真该用 <picture></picture>，而不是 <img srcset>
<picture></picture> 的核心价值只有一个：art direction（艺术指导），即不同屏幕下展示语义不同的构图版本。其他场景基本不需要它：
- ✅ 该用：
<source media="(max-width: 480px)" srcset="hero-mobile-crop.jpg"></source>（手机特写人脸）、<source media="(min-width: 1024px)" srcset="hero-desktop-wide.jpg"></source>（桌面全景） - ❌ 不该用：只是想让小屏加载小图、大屏加载大图——这种情况用
<img srcset="a-400w.jpg 400w, a-800w.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw">更安全、兼容性更好 -
type="image/avif"可用于格式降级，但注意：Chrome 支持就用，不支持就跳过该<source></source>，不会尝试下一个；所以 WebP/AVIF<source></source>必须放在 JPEG 前面
真正容易被跳过的硬性要求只有三个：<img> 必须存在且带 src，所有 srcset 路径必须真实可访问，media 值必须是合法 CSS 媒体查询——少一个，整个 <picture></picture> 就失效，但浏览器不会告诉你为什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
