sizes属性是静态声明图片渲染宽度的html属性，非css样式；缺省、单位错误、媒体条件不匹配或与实际渲染宽度偏差大时，srcset的w描述符即失效，浏览器退化为加载src或首图。
sizes 属性不能动态计算，必须在 HTML 字符串中静态写出；它不是控制图片显示效果的样式属性，而是提前告诉浏览器“这张图在当前布局下会渲染成多宽”，缺了或写错，srcset 里的 w 描述符就完全失效。
为什么写了 srcset 还是总加载最大图
绝大多数情况是 sizes 缺失、单位错误、媒体条件不匹配，或者值和 CSS 实际渲染宽度偏差太大。浏览器看到 srcset="a.jpg 400w, b.jpg 800w" 却没 sizes，就直接放弃响应式逻辑，退化为加载 src 或第一张候选图——这不是 bug，是规范强制要求。
-
sizes值里漏单位（比如写成sizes="50vw, 300"）→ 整个属性被忽略 - 媒体条件顺序错，比如把
(min-width: 769px)放在前面 → 后面的(max-width: 768px)永远不触发 - 兜底值缺失，如只写
sizes="(max-width: 768px) 100vw"→ 旧版 Safari 会 fallback 到100vw，桌面端也拉大图 - CSS 用了
margin: 0 16px，但sizes还写100vw→ 浏览器按 1200px 选图，实际只渲染 343px
怎么写出真正有效的 sizes 值
别靠设计稿或“大概估算”，必须从 DevTools 的 Computed 面板里抄真实 width 像素值，再换算成 vw 或 px。浏览器只认这个，不认你的 width: 100% 或 max-width: 600px。
- 打开 Chrome DevTools → Elements → 选中
<img>→ 右侧 Computed 标签页看width - 在每个关键断点（比如 375px、768px、1200px）下记录该值，再除以当前视口宽度，得出近似
vw值（如 343px ÷ 375px ≈ 91.5vw → 写90vw） - 全宽 banner 图：用
sizes="100vw"（但要确认真没边距） - 栅格三列布局中的一张图：实测宽度约 33vw，写
sizes="(max-width: 768px) 100vw, 33vw"，别信“33.333vw” - 卡片内嵌图（
max-width: 600px+padding: 16px）：写sizes="(max-width: 600px) calc(100vw - 32px), 600px"不行——calc()在sizes中非法，得手动换算成(max-width: 600px) 90vw, 600px
sizes 和 CSS 媒体查询必须严格对齐
你 CSS 里用 @media (max-width: 768px) 切布局，sizes 就必须写 (max-width: 768px)，写成 767px 或 769px 就会错位。浏览器从左到右匹配第一个为 true 的条件，不匹配就用最后一项兜底，所以顺序和断点必须严丝合缝。
- 空格敏感：写成
(max-width:768px) 100vw（括号紧贴数字）在旧版 Edge 里会解析失败 - 单位只接受
vw、px、em；%、rem、calc()全部无效 - 如果 CSS 是通过 JavaScript 动态改容器宽度（比如 sidebar 展开），
sizes静态值不会自动更新——此时应换用<picture></picture>+<source media></source>切整套资源 -
<source></source>上写的sizes完全无效，必须写在<img>标签上
最容易被忽略的是：浏览器在 HTML 解析阶段就用 sizes 预取图片，此时 JS 还没执行、CSS 可能都未加载。你所有“想让它更智能”的运行时修正，都在它做决定之后才发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
