srcset用w描述符时sizes是强制搭档，缺之则浏览器无法计算目标物理像素宽度，直接忽略srcset而加载src；sizes必须带单位、真实反映css布局宽度，且w与x描述符不可混用。
srcset 用 w 描述符时 sizes 是强制搭档
浏览器看到 srcset 里有 400w、800w 这类单位，就立刻切换到「宽度匹配模式」，但它根本不知道这张图在页面里实际占多宽。没有 sizes，它没法把「视口宽度 × 设备像素比」和这些 w 值对上号，只能放弃整个 srcset，退化为加载 src 或第一个候选图。
常见错误现象：
- 写了
srcset="a.jpg 400w, b.jpg 800w"却没写sizes→ Chrome/Firefox 通常只加载src；Safari iOS 11–12.0 可能完全不触发选择逻辑 -
sizes写成"50%"或"400"（缺单位）→ 整个属性被解析失败，srcset形同虚设 - 最后一项没写兜底，如
sizes="(max-width: 768px) 100vw"→ 旧版 Safari 或某些 Edge 会 fallback 到100vw，小屏也拉大图
sizes 必须真实反映 CSS 布局宽度
sizes 不是控制样式，而是提前告诉浏览器“这张图**将渲染成多宽**”。它必须和你实际写的 CSS 对齐，否则选图就偏了——比如 CSS 是 width: 100%; max-width: 400px;，那 sizes 就得写成 "(max-width: 400px) 100vw, 400px"。
容易踩的坑：
- 抄设计稿标注的“768px 断点下显示 256px”，却忽略栅格系统实际占位是
33.33%→ 应写sizes="(max-width: 768px) 100vw, 33.33vw" - 媒体查询空格不规范，如
(max-width: 768px)中间有空格 → 旧版 Safari 和 Edge 直接解析失败 - 误用
calc()或 CSS 变量，如sizes="(min-width: var(--md)) 50vw"→ 整条规则失效
w 和 x 描述符不能混用
srcset 解析时，浏览器靠后缀判断匹配逻辑：遇到 x 就看设备像素比（DPR），遇到 w 就结合 sizes 算目标物理像素宽度。混写会导致部分浏览器直接忽略整个 srcset，只加载 src。
典型错误写法：
-
srcset="logo-400w.png 400w, logo@2x.png 2x"→ 整个srcset被忽略 -
srcset="img-2x.jpg 2x"没配sizes→ 小屏手机也加载 2x 图，浪费带宽 -
src指向1920w大图 → 老浏览器直接卡顿，且无降级缓冲
验证是否生效，只看 Network 面板里的实际请求
别信“看起来清晰”，也别靠模拟器缩放判断。真正在意的是浏览器到底发了哪个请求：
- 打开 DevTools → Network → 过滤
img - 勾选
Disable cache（Chrome）或关闭Disable Cache（Safari） - 切换设备预设（如 iPhone 12、iPad Pro），或手动拖动视口宽度
- 刷新页面，看加载的是
hero-400w.jpg还是hero-1200w.jpg - 右键请求 →
Copy response headers→ 对照Content-Length确认没被缓存干扰
如果始终只加载 src 指向的图，检查控制台是否报错 Failed to parse 'srcset' value，或 sizes 里有没有漏掉单位（比如写了 sizes="50" 而不是 sizes="50vw"）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
