sizes属性用于声明图片在页面中的实际占位宽度而非计算，其值必须与CSS渲染出的宽度一致，否则会导致选图错误、模糊或CLS；语法仅支持标准媒体查询和vw/px/em单位，禁用%、calc()、CSS变量；正确写法需依据DevTools中实测的容器宽度精确声明。
sizes 属性不是用来“计算”的，而是用来“声明”图片在页面中实际占位宽度的。 它不参与任何运算，只告诉浏览器：“这张图，在这个断点下，CSS 渲染出来的宽度是多少”。写错就直接导致选图偏大、模糊或 CLS（布局偏移）。
为什么写了 sizes 还加载了错误尺寸的图？
最常见原因是：CSS 实际生效宽度 ≠ sizes 声明的值。浏览器完全无视你写的 width: 100% 或 grid-column: span 2，它只认 sizes 里写的数字。
- 打开 DevTools → Elements → 选中
<img>→ 右侧 Computed 面板看width的实际像素值（比如372.5px） - 手动算当前断点下
sizes解析出的值（比如(max-width: 768px) 100vw在 375px 视口下就是375px） - 两者差超过 ±10%，就大概率选错图源；差超过 ±30%，基本会模糊或白屏 fallback
- 注意
max-width条件是包含边框、padding、margin 的总宽度，但sizes声明的是内容区宽度，别把容器宽当图片宽
sizes 的语法和单位有哪些硬性限制？
sizes 是纯声明式属性，浏览器按从左到右顺序匹配第一个为 true 的媒体条件，没匹配上就用最后的兜底值。它对格式极其敏感。
- 媒体条件必须用标准 CSS 媒体查询语法，例如
(max-width: 480px)、(min-width: 900px)，不支持and多条件嵌套 - 每个条件后跟的宽度值只能是
vw、px、em，不能用%（即使 CSS 里用了width: 50%，sizes也得换算成50vw或具体像素） -
不支持
calc()、CSS 变量、函数表达式——哪怕写calc(100vw - 32px)也会被整个忽略，退化为默认100vw - 兜底值（最后一项）不能带括号，必须存在，例如
, 33vw或, 64px
如何为不同布局场景写正确的 sizes 值？
关键逻辑：先确认图片容器在各断点下的 CSS 宽度（不是设计稿标注，是 DevTools 里看到的真实 computed width），再原样抄进 sizes。
- 全宽 Banner：移动端无边距 →
(max-width: 480px) 100vw；桌面端固定 800px →, 800px - 三列卡片图（Grid 布局）：移动端单列 →
(max-width: 768px) 100vw；桌面端三列，每列含 gap → 实测宽度约31.5vw→ 写, 31.5vw - 侧边栏头像：始终固定
64px，和视口无关 → 直接写兜底值64px，不用任何媒体条件 - 文章内嵌图：宽度随内容区变化，比如 content 宽度是
max(400px, 80%)→ 实测不同断点宽度后，分别写(max-width: 600px) 400px, (max-width: 1200px) 80vw, 800px
最容易被忽略的点：当你用 srcset 配 w 描述符时，sizes 声明的宽度必须和 srcset 中每个 w 值形成可比关系——比如你写了 400w, 800w, 1200w，那 sizes 在对应断点下就不能是 200vw 或 100px 这种明显不匹配的值，否则浏览器根本无法做有效比对。
