极小屏幕加载错图是因为 media 查询断点存在空隙且 fallback 图未适配；应使用无间隙断点（如 max-width: 320px、min-width: 321px）、禁用 sizes+w、为 提供专供极小屏的 tiny 图并确保 mime 类型正确。
为什么极小屏幕（如手表、折叠屏半开态）会加载错图
因为 media 查询默认不覆盖极端窄宽，比如写 max-width: 480px 看似兜底，但实际设备宽度可能只有 280px–320px，而浏览器匹配逻辑是“第一个满足即停”，若前面的 <source></source> 已命中（比如平板断点 min-width: 481px 被误判为 false，但更宽的桌面规则又没写全），就可能跳过所有适配，直接 fallback 到 <img> 的 src —— 而这张图往往没针对极窄屏优化。
如何用 media 写出真正安全的极小屏断点
关键不是“加一个最小断点”，而是让断点序列无空隙、无歧义、可预测：
-
media="(max-width: 320px)"→ 明确覆盖智能手表、折叠屏单侧展开等超窄场景（注意单位必须是px，320无效） -
media="(min-width: 321px) and (max-width: 480px)"→ 手机竖屏主流区间，与上一条无缝衔接 -
media="(min-width: 481px) and (max-width: 768px)"→ 平板竖屏/折叠屏双开态，避免和768px边界重叠 - 所有断点用开区间（
321px而非320px）规避 320px 宽设备的双重匹配风险
极小屏下必须禁用 sizes + w 描述符
当视口宽度低于 360px，sizes 中的 100vw 会误导浏览器预估尺寸：比如 CSS 设了 max-width: 300px，但 sizes="100vw" 让浏览器以为要加载 320w 图，结果在 DPR=3 的手表上拉取 960w 图——远超显示所需。此时应：
- 对
max-width: 320px的<source></source>，只用srcset="small-1x.jpg 1x, small-2x.jpg 2x"，不带w描述符 -
<img>的sizes属性**不写**，或显式设为sizes="320px"（固定值，非响应式） - 避免混用：
srcset="a.jpg 320w, b.jpg 2x"整个值被忽略，回退到<img>的src
fallback 图必须专供极小屏，不能复用桌面图
<img> 是最终兜底，但它不是“备用图”，而是“必加载图”。如果极小屏没匹配任何 <source></source>，就会强制加载它：
-
<img src="hero-desktop.jpg" alt="...">→ 极小屏设备会下载一张 1920w 的图，内存溢出风险高 - 正确做法：
<img src="hero-tiny.jpg" alt="...">，且这张图必须真实存在、体积 ≤ 30KB、尺寸 ≤ 320×320 - 服务器需确保
Content-Type与文件一致（image/jpeg不可写作image/jpg），否则 Network 面板显示blocked:mime-type，静默失败
最易被忽略的一点：极小屏设备（尤其是 Wear OS 或三星 Galaxy Watch）常禁用 type="image/webp"，即使你写了 <source type="image/webp"></source>，它也可能直接跳过整条规则——所以针对 max-width: 320px 的 <source></source>，优先用 JPEG 或 PNG，别依赖现代格式兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
