srcset用w描述符时sizes是强制搭档，缺失或写错会导致浏览器退化加载src或首张候选图；sizes必须带合法单位、真实反映css渲染宽度，且w与x不可混用。
srcset 用 w 描述符时 sizes 是强制搭档
写了 srcset="hero-400w.jpg 400w, hero-800w.jpg 800w" 却没写 sizes，浏览器根本不会去匹配那两张图——它连“这张图在页面里会占多宽”都不知道，只能退化成加载 src 或第一个候选图。这不是兼容性问题，是规范行为。
常见错误现象：
-
sizes缺失 → Chrome/Firefox 加载src；Safari iOS 11–12.0 可能完全不触发选择逻辑 -
sizes="50"（漏单位）→ 整个属性被解析失败，srcset形同虚设 -
sizes="(max-width: 768px) 100vw"（没兜底）→ 旧版 Safari fallback 到100vw，小屏也拉大图
sizes 必须真实反映 CSS 布局宽度
sizes 不是“建议”，而是浏览器计算该加载哪张图的唯一依据。它声明的是“这张图**将渲染成多宽**”，单位必须是 vw、px 等合法长度，不能是 % 或 rem。
典型场景与写法：
- CSS 是
width: 100%; max-width: 400px;→sizes="(max-width: 400px) 100vw, 400px" - 栅格中固定占 1/3 宽，断点从 768px 开始 →
sizes="(max-width: 768px) 100vw, 33.33vw" - 导航 logo 移动端全屏、桌面端固定 200px →
sizes="(max-width: 480px) 90vw, 200px"
如果实际 CSS 把图片设为 width: 300px，而 sizes 还写 100vw，浏览器就会选接近 1200w 的图——哪怕你只显示 300px 宽。
w 和 x 描述符不能混写在同一 srcset 中
srcset="logo-1x.png 1x, photo-800w.jpg 800w" 这种写法会让浏览器直接丢弃整个 srcset，只加载 src。它不是部分生效，而是整条属性失效。
判断用哪个：
- 用
w：目标是适配布局宽度，必须配sizes，适合 banner、内容图等流式场景 - 用
x：目标是适配设备像素比，sizes可省略，但只适用于固定宽高的图标、头像等
注意：x 在现代响应式布局中容易失效——它假设图片占满视口，而 CSS 控制宽度后，DPR 匹配就不可靠了。
验证是否生效，只看 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
