标签本身不切换图片，仅将选择权交给浏览器；必须正确书写的media属性（含括号、合法语法）、按从宽到窄顺序排列，且必须作为最后子元素提供src和alt兜底，否则全部fallback。
<source></source> 的 media 顺序和语法，浏览器在加载阶段就会自动挑出最匹配的那一张，不卡顿、不重复下载、不依赖 JS。
为什么写了 media 却只加载 <img src>？
常见原因不是逻辑错，而是浏览器压根没执行匹配：
-
media="max-width: 768px"缺括号 → 浏览器静默忽略整条<source></source> -
media="768px"或media="tablet"→ 非法媒体查询，该<source></source>失效 -
<source></source>写在<img>后面 → 浏览器直接跳过，只加载<img src> - 所有
media都不匹配 → 浏览器不报错，默默 fallback 到<img src>，你根本看不到提示
<source></source> 的 media 顺序为什么必须从宽到窄？
浏览器从上到下扫描 <source></source>，遇到第一个为 true 的就立即加载对应资源，不再继续判断：
- ✅ 正确：先
media="(min-width: 1200px)"，再media="(min-width: 768px)"，最后media="(max-width: 767px)" - ❌ 错误：把
media="(max-width: 767px)"放最前 → 小屏设备永远卡在这条，宽屏规则根本没机会触发 - ⚠️ 边界重叠风险：比如同时存在
(min-width: 768px)和(max-width: 768px)，768px 宽度会命中第一个，行为不可控
<img> 不是可选的，它是强制 fallback
漏掉它，或只写 <img alt=""> 而不带 src，会导致整个区域空白：
-
<img>必须存在，且必须含src和alt属性 - 不能是自闭合写法：
<img>或<img>都无效，必须写成<img src="..." alt="..."> -
<img>上可以（也推荐）加sizes和srcset，尤其当它作为 fallback 也要适配高 DPR 时 - 旧版 Safari（16.4 之前）完全依赖
<img src>渲染，缺了就白屏
最容易被忽略的其实是服务器配置
就算你写了 type="image/webp"，如果服务器返回的 Content-Type 不是 image/webp，Chrome 会标记为 blocked:mime-type，直接跳过该 <source></source>，落到下一条或最终 <img>。
同样，sizes 必须写在 <img> 上，写在 <source></source> 里会被忽略；srcset 里混用 w 和 x（比如 "photo-800w.jpg 800w, photo@2x.jpg 2x"）会让整个值被浏览器丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
