浏览器只信任sizes声明的宽度而非CSS实际渲染宽度，即使CSS将图片压至320px，若sizes写为"(max-width: 768px) 100vw, 50vw"，浏览器仍按视口宽计算选图，导致小屏加载大图、桌面模糊或CLS；正确做法是通过DevTools Computed面板实测各断点下width像素值，再换算为vw或px精确填写sizes。
为什么 sizes 写对了还是加载错图
浏览器根本不读你的 CSS，它只信 sizes 里写的值。哪怕你用 width: 100%; max-width: 320px; 把图片压到 320px 宽，只要 sizes="(max-width: 768px) 100vw, 50vw"，它就按视口宽度算——375px 视口 → 375px 渲染宽 → 挑最接近的 400w 图；但 1200px 视口 → 600px 渲染宽 → 可能挑 800w 或 1200w，哪怕图片实际只显示 320px。
常见表现：Failed to parse 'srcset' value（sizes 里漏单位）、小屏加载 2MB 的 1200w 图、桌面端模糊（选了 400w 却要渲染 600px）。
sizes 值怎么从 CSS 布局里“抄”出来
打开 DevTools → Elements → 选中 <img> → 右侧 Computed 面板看 width 值，在每个关键断点下记下这个像素数，再换算成 vw 或 px：
- 如果 Computed width 是
calc(100vw - 32px)，别写100vw，得估算：iPhone SE（375px）→ 343px ≈91.5vw，但为稳妥可写(max-width: 375px) 90vw - 如果卡片内图片 CSS 是
width: 100%; max-width: 300px;，且父容器在桌面端固定宽，则 sizes 应为(max-width: 768px) 100vw, 300px - Grid 中占 1/3 栅格？查 Computed width 是多少 px，再除以视口宽得 vw 值，比如 1200px 视口下是 390px →
32.5vw→ 四舍五入写33vw
媒体查询写法必须和 CSS 完全一致
sizes 的媒体条件不是“大概意思”，而是逐字匹配。浏览器从左到右取第一个为 true 的条件，没匹配上就用最后那个无条件值：
立即学习“前端免费学习笔记（深入）”；
- 你的 CSS 断点是
@media (max-width: 768px)，sizes 就必须写(max-width: 768px)，不能写767px或769px - 兜底值必须存在，且不能带括号：
300px合法，(min-width: 769px) 300px在旧版 Safari 中可能被忽略 - 空格敏感：EdgeHTML 会把
(max-width: 768px)当无效，建议写成(max-width:768px) - 单位只能用
vw、px、em；%、rem、calc()全部失效
验证是否真生效，只看 Network 请求头
别信预览效果，也别靠缩放窗口判断。真实依据只有 Network 面板里的请求：
- 打开 DevTools → Network → 过滤
img→ 勾选Disable cache（Chrome）或关闭缓存（Safari） - 切换设备预设（如 iPhone 12、iPad Pro）或手动拖动窗口宽度
- 刷新后看加载的是
hero-400w.jpg还是hero-1200w.jpg - 右键请求 →
Copy response headers→ 对照Content-Length，确认没被缓存干扰 - 检查 Request Headers 里有没有
Sec-CH-DPR或Width字段，没有说明浏览器根本没走响应式逻辑
最常被忽略的一点：CSS 改了，sizes 必须同步改。它不是一次设置永久有效，而是和布局强绑定的声明。哪怕只是加了个 padding: 16px，也可能让图片渲染宽度缩掉 32px，这时 sizes 就得重算。
