media query 与 sizes 无关，sizes 是静态声明，语法错误（如空格、单位缺失）会导致整条被丢弃而退化为 100vw；需实测渲染宽度并换算为整数 vw 或 px 填入，且必须配合 srcset 的 w 描述符才能触发响应式加载。
为什么写了 media query 还是没生效
sizes 属性里的 (max-width: 768px) 看似和 CSS 媒体查询一样，但它**不执行 CSS 计算、不继承样式、不响应运行时变化**——它只是一组静态声明，浏览器按字符串逐字解析。一旦括号里写错空格（比如 (max-width:768px) 少了空格）、单位漏写（300 而不是 300px），整条 sizes 就被丢弃，退化为 100vw。
- DevTools 的 Elements 面板里看到
sizes值高亮为灰色？说明语法错误，浏览器已忽略 - 写了
@media (max-width: 768px) { img { width: 300px; } }，但sizes="(max-width: 768px) 100vw"——这俩完全无关，浏览器不会读你的 CSS 来推断渲染宽度 -
calc()在sizes中几乎全平台不支持，sizes="(max-width: 768px) calc(100vw - 32px)"等同于没写
怎么拿到真实的“图片渲染宽度”填进 sizes
别猜，实测。打开 Chrome DevTools → Elements → 选中 <img> → 右侧 Computed 面板看 width 的像素值（注意是实际渲染值，不是 CSS 声明值）。再手动换算成 vw 或固定 px：
- 视口宽度 375px，图片实测宽 343px →
343 / 375 * 100 ≈ 91.5vw，写成91vw（sizes不支持小数，向下取整更安全） - 卡片带左右各 16px margin，父容器
width: 100%→ 实测图宽 = 视口宽 − 32px，但不能写calc(100vw - 32px)，得换算：1200px 视口下图宽 1168px →1168 / 1200 * 100 ≈ 97vw - 固定最大宽
max-width: 800px的布局 → 断点外直接写800px，比如sizes="(max-width: 800px) 100vw, 800px"
srcset 用 w 单位时 sizes 必须存在且匹配
写了 srcset="small.jpg 400w, large.jpg 1200w" 却没配 sizes？浏览器根本不会走响应式逻辑，直接加载 large.jpg 或 src 指定的图。因为 w 描述符必须配合 sizes 提供的“目标显示宽度”才能做匹配计算。
-
sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px"对应srcset里的400w/768w/1200w—— 注意：这里480px是页面中图片占位宽，不是设备宽度，也不是图片文件宽 - 如果
sizes写成"(max-width: 480px) 100vw"，而当前视口是 400px，浏览器就按400px去 srcset 里找 ≥400w 的最小图；若只有400w和1200w，会选400w - 设备像素比（DPR）会叠加影响：DPR=2 时，400w 图可能被当成 200px 渲染宽来用，所以
sizes填的仍是 CSS 像素值，不用乘 DPR
调试时最容易忽略的缓存干扰
改完 sizes 刷新页面，Network 面板还是加载大图？大概率是缓存。浏览器一旦缓存了某张高清图，就不会因为切小屏重新请求更小图——这是正常行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 必须用 Chrome 无痕窗口 + DevTools Network 面板勾选
Disable cache - 用 Device Toolbar 切换视口后，**硬刷新（Ctrl+F5）**，不要点地址栏回车
- 观察请求 URL 是否随视口变化：450px 宽时该加载
400w图，600px 时该加载768w图
真正难的不是写对语法，而是把 CSS 渲染结果精确翻译成 sizes 字符串。每次改布局，都要重新测宽、重算 vw、重验语法——它脆弱，但不可跳过。
