根本原因是浏览器严格按sizes计算的渲染宽度向上匹配srcset中最接近且不小于该值的w源；若srcset中无合适选项（如需600w却只有400w和1200w），则被迫选用1200w。
为什么sizes写对了，浏览器还是加载了大图
根本原因不是浏览器“选错”，而是它严格按 sizes 计算出的渲染宽度去查 srcset 列表——如果列表里没有接近的选项，它就只能选“不小于该宽度”的最小值。比如 sizes="(max-width: 768px) 300px"，当前视口 400px，DPR=2，浏览器算出需 600px 有效像素，但 srcset 只有 400w 和 1200w，它只能选 1200w。
-
sizes必须真实反映 CSS 布局中图片最终渲染宽度，不能凭感觉写“大概 50vw” - 若图片被 CSS 设置了
max-width: 300px，而sizes写成100vw（视口 1200px → 1200px），浏览器就会去找 ≥1200w 的源 - 媒体查询断点要覆盖实际布局切换点，比如卡片在 520px 宽度时从单列变双列，
sizes就得有(max-width: 520px)分支
sizes里的媒体查询怎么写才不踩坑
sizes 不是 CSS，它只接受媒体条件 + 宽度值的组合，且必须带单位。常见错误是漏单位、括号不匹配、或用非标准语法。
- 合法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px" - 非法：
sizes="max-width: 480px 100vw"（缺括号）、sizes="(max-width: 480px) 100"（缺vw）、sizes="50vw, 300"（第二个值没单位） - 当布局完全由 CSS Grid/Flex 控制且宽度不可预估时，慎用固定像素值如
300px；优先用vw或ch等相对单位 - 移动端常漏掉
orientation: landscape分支，横屏时图片占位可能突变，需单独声明，例如：(orientation: landscape) 80vw
srcset用w单位时，怎么配sizes才生效
srcset 里的 w 描述符只在 sizes 存在时才有意义；没有 sizes，浏览器默认按 100vw 计算占位宽，小屏也拉大图。
- 必须同时提供
src属性作为降级 fallback，否则 IE、旧 Safari 直接不显示图片 -
srcset中每个条目格式为"url.jpg width_valuew"，width_value是图片文件本身的固有宽度（不是 CSS 显示宽），例如avatar-640.jpg 640w -
sizes输出的是“这张图在当前视口下会渲染多宽”，浏览器拿这个值去srcset里找最接近且 ≥ 它的w值——不是四舍五入，是向上取整匹配 - 示例：
srcset="img-400.jpg 400w, img-800.jpg 800w"+sizes="(max-width: 600px) 320px"→ 视口 500px 时，浏览器按 320px 查，选400w；若改成sizes="(max-width: 600px) 480px"，就会选800w
怎么验证浏览器真正在用sizes+srcset逻辑
别信 DevTools 里看到的“加载了哪张图”，得看请求头是否携带设备提示字段，否则说明响应式选择根本没触发。
- 打开 Network 面板，刷新页面，点击图片请求 → 查看 Request Headers → 找
Sec-CH-DPR（设备像素比）和Width（浏览器计算出的渲染宽度）；两者都存在，说明逻辑生效 - 若只有
Sec-CH-DPR没有Width，大概率是sizes缺失或语法错误，浏览器退回到纯 DPR 匹配模式 - Chrome 开发者工具的 “Application → Frames → Response Headers” 里能看到
Vary: Sec-CH-DPR, Width，这是 CDN 正确配置的标志 - 用
chrome://flags/#enable-client-hints确保 Client Hints 已启用（新版 Chrome 默认开启）
sizes 和真实 CSS 布局之间的同步问题——改了 flex 容器的 flex-basis，却忘了更新 sizes 里的媒体断点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
