sizes必须静态声明，因浏览器在html解析阶段（css和js执行前）就预取图片，此时动态设置无效；其值须与css实际渲染宽度严格对齐，否则导致选图错误、模糊或cls，且语法容错率极低，空格、单位、括号任一出错即整条失效。
直接写 sizes="100vw" 几乎必然导致小屏加载大图、桌面图模糊或布局偏移（CLS），因为浏览器只认 sizes 声明的宽度，完全不读你的 CSS；它在 HTML 解析阶段就决定加载哪张图，此时连 CSS 都没开始解析。
为什么 sizes 必须静态写死，不能用 JS 设置
浏览器在解析 HTML 字符串时（DOM 构建前、CSS 计算前、JS 执行前）就完成图片资源预取。此时 document 还未 ready，window.matchMedia 不可用，任何 img.setAttribute('sizes', ...) 或 React/Vue 的 mounted 钩子都晚了——资源选择早已 fallback 到 src 或默认 100vw。
- 常见错误：用
ResizeObserver监听容器变化后重设sizes→ 无效，浏览器不会重新触发资源选择 - SSR 或构建时（如 Vite 插件）可注入预计算值，但仍是硬编码进 HTML 的字符串，不是运行时计算
-
sizes="auto"仅在loading="lazy"+ 明确width/height（或等效 CSS 尺寸）时部分浏览器支持，非懒加载场景不可用
sizes 值必须和 CSS 渲染宽度严格对齐
浏览器把 sizes 当作“这张图将渲染成多宽”的唯一信源。它不关心你写了 width: 100%、max-width: 400px 或 grid-column: span 2，只按你写的媒体条件 + 长度值查表匹配 srcset 中的 w 候选。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 验证方法：DevTools → Elements → 选中
<img>→ Computed 面板看width实际像素值，再手动代入当前视口宽度计算sizes表达式结果，两者误差应 ≤10px - 边距影响：CSS 设了
margin: 0 16px，真实宽度 ≈100vw - 32px，sizes就不能写100vw，得估算为(max-width: 480px) 93vw（因calc()在sizes中不被支持） - 栅格布局：三列
grid-template-columns: repeat(3, 1fr)，每列≈33.33vw，写成33vw（单位只接受vw/px/em，%和calc()非法）
sizes 语法细节与常见失效点
sizes 是纯 HTML 属性，解析极其严格：空格、括号、单位、顺序任意一处出错，整条规则就会被丢弃，srcset 形同虚设。
- 媒体条件必须用括号包裹，且括号与关键词间不能有空格：
(max-width: 768px)✅，(max-width:768px)❌（旧版 Safari/Edge 直接失效） - 每个项必须是「媒体条件 + 空格 + 带单位长度值」：
(max-width: 768px) 100vw✅，(max-width: 768px)100vw❌（缺空格） - 最后一项是兜底值，不能带媒体条件：
33vw✅，(min-width: 769px) 33vw❌ - 单位只能是
vw、px、em；%、rem、calc()（除极少数浏览器支持简单calc(100vw - 2rem)外）均非法
srcset 用 w 描述符时，sizes 是强制搭档
只要 srcset 里出现 400w、800w 这类 w 描述符，sizes 就不是可选项，而是必需项。没有它，浏览器无法把视口宽度 × DPR 和这些 w 值对上号，只能放弃整个 srcset，退化为加载 src 或第一个候选图。
- 常见错误现象：
srcset="a.jpg 400w, b.jpg 800w"却没写sizes→ Chrome/Firefox 加载src，Safari iOS 11–12 可能完全不触发选择逻辑 -
w和x描述符不能混用：srcset="a.jpg 1x, b.jpg 800w"→ 整个srcset被忽略，只加载src - 兜底值缺失：
sizes="(max-width: 768px) 100vw"（无最后一项）→ 旧版 Safari fallback 到100vw，小屏也拉大图
最易被忽略的点是：你改了 CSS 布局（比如加了 padding、换用 flex、调整断点），但 sizes 没同步更新——浏览器仍按旧声明选图，偏差可能高达 2–3 倍。它不推理、不猜测，只执行你写进 HTML 字符串里的那串字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
