sizes 属性必须静态声明，不能动态计算，因其在 html 解析阶段就被浏览器用于图片预取，此时 js 尚未执行；它需与 css 实际渲染宽度严格一致，否则导致选图错误。
sizes 属性不能动态计算，它必须是静态声明的媒体条件列表；所谓“自适应”依赖的是你对 CSS 布局宽度的准确预判，而不是运行时 JS 计算。
为什么 sizes 不支持 JavaScript 动态设置
sizes 是纯 HTML 属性，浏览器在解析 HTML 阶段（尚未执行 JS、甚至未加载 CSS）就要开始预取图片资源。此时 document 还没 ready，window.matchMedia 不可用，任何 JS 生成的值都来不及参与资源选择。
常见错误是试图用 img.setAttribute('sizes', ...) 或模板字符串拼接视口宽度——这只会让浏览器忽略整个 sizes，退回到默认的 100vw，导致小屏加载大图。
- sizes 必须在 HTML 字符串中直接写出，如
sizes="(max-width: 768px) 90vw, (max-width: 1200px) 45vw, 33vw" - 服务端渲染（SSR）或构建时（如 Vite 插件）可注入预计算的 sizes，但仍是静态字符串
- 想“响应滚动/resize”，得换思路：用
<picture></picture>+<source media></source>切换整套 srcset，而非改 sizes
sizes 值必须与 CSS 实际渲染宽度严格一致
浏览器只认 sizes 声明的宽度，完全无视你写的 width: 100%、max-width: 300px 或 Grid 的 grid-column: span 2。如果两者偏差超过 10%，就可能选错图源。
检查方法：打开 DevTools → Elements → 选中 <img> → 右侧 Computed 标签页看 width 值，再手动代入当前视口宽度，计算 sizes 表达式匹配结果，比对是否接近。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 例如 CSS 设了
margin: 0 16px; width: calc(100% - 32px)，那 sizes 就不能写100vw，而应估算为(max-width: 480px) 90vw（减去左右边距后约等于） - 使用 CSS 容器查询（@container）时，sizes 仍需按视口断点写，因为容器查询不触发资源预取逻辑
- Flex/Grid 中子项被压缩？sizes 得按父容器实际宽度 + 比例反推，比如
flex: 1在三列布局中≈33.33vw，但建议写成33vw（单位只接受 vw/px/em）
w 描述符 + sizes 的匹配逻辑容易被高估精度
浏览器从 srcset 中选图，不是“找最接近”，而是“找不小于渲染宽度的最小候选”。比如 sizes 算出 420px 渲染宽，srcset 有 400w 和 800w，它会选 800w —— 因为 400w
这意味着：如果你的布局宽度波动大（比如从 380px 跳到 450px），但 srcset 只提供 400w/800w，中间缺口会导致 450px 场景下强制加载 800w，浪费带宽。
- 安全做法：srcset 宽度按布局最大可能宽度 × 1.5 倍准备，如布局宽 500px → 提供 750w、1000w、1500w
- 避免混用 w 和 x：如
srcset="a.jpg 400w, b.jpg 2x"，浏览器无法统一决策逻辑，可能降级为只读第一个 - 移动端首屏图片，sizes 建议显式写窄值，比如
(max-width: 480px) 90vw，别信“100vw 就行”——手机有状态栏、圆角、缩放，实际渲染常不足 100vw
src 必须存在，且应指向中等清晰度版本
src 不是摆设。IE、旧版 Safari、部分 Android WebView 会直接忽略 srcset，只加载 src。如果 src 指向 2000w 大图，老设备首屏就卡死；如果指向 300w 小图，高清屏上又糊。
合理策略：src 指向一个体积可控（
- srcset 中的 w 候选图应覆盖从 src 宽度向上延伸的范围，比如 src=768w，则 srcset 至少含 768w、1200w、1800w
- 不要省略单位：
sizes="50vw"合法，sizes="50"无效，浏览器静默忽略 - CDN 自动优化（如 Cloudflare Image Resizing）可配合 sizes 使用，但需确认其是否识别 Sec-CH-DPR 请求头，否则仍走默认逻辑
真正难的不是写对语法，而是把设计稿里的“占满卡片”“两栏并排”“留白 16px”这些描述，一一手动换算成精确的 vw/px 值，并确保 CSS 布局真能撑出那个宽度。很多人卡在这一步，然后怪浏览器“没选对图”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
