sizes不支持百分比，因浏览器只接受vw、px、em等绝对长度单位来计算图片预期显示宽度；百分比无绝对值无法参与srcset资源匹配，必须转换为vw或px等合法单位。
为什么 sizes 里不能直接写百分比值
sizes 属性的语法不接受纯百分比（如 100% 或 50%），它只认视口单位（vw）、固定长度（px、em）或媒体查询条件 + 对应宽度。浏览器在解析 sizes 时，是按从左到右匹配第一个满足的媒体查询，然后取其后的宽度值作为该图片的「预期显示宽度」，用于配合 srcset 中的 w 描述符做资源选择。百分比本身不是绝对宽度，无法参与这个计算。
sizes 配合媒体查询的正确写法
核心是：每个媒体查询后紧跟一个**长度值**（推荐用 vw），而不是百分比。常见误区是把 CSS 布局思维直接搬过来，比如想“占屏宽 80% 就写 (max-width: 768px) 80%”——这会直接被忽略或导致 fallback 到 100vw。
- ✅ 正确：
sizes="(max-width: 768px) 90vw, (max-width: 1200px) 60vw, 40vw" - ❌ 错误：
sizes="(max-width: 768px) 80%, 100vw"（80%无效） - ⚠️ 注意：最后一个值是无条件 fallback，必须存在且为合法长度
示例场景：响应式卡片内图片，移动端占屏宽 90%，平板占 60vw，桌面固定 400px：
<img
src="img.jpg"
srcset="img-400w.jpg 400w,
img-800w.jpg 800w,
img-1200w.jpg 1200w"
sizes="(max-width: 768px) 90vw,
(max-width: 1200px) 60vw,
400px"
alt="响应式图片">怎么把「容器宽度百分比」转成 sizes 可用的值
如果布局中图片父容器设了 width: 80%，你不能直接抄这个值。得结合容器实际占据的视口比例估算，常用策略：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
vw近似：若容器有左右各 10% 边距，则图片宽度 ≈80vw；若有固定边框/内边距，需减去对应px值再换算（例如 20px 左右边距 →80vw - 20px，但注意sizes不支持运算，只能粗略取整） - 保守做法：按最窄可能宽度设 fallback，比如容器最小能缩到 50% 视口宽，就用
50vw作 fallback - 复杂布局建议放弃精确匹配，改用固定断点 +
vw组合，比如(min-width: 1440px) 33.33vw对应三栏
Chrome DevTools 里怎么验证 sizes 是否生效
打开开发者工具 → Elements 面板 → 选中 <img> → 在右侧 Styles 面板底部找 Computed 标签页 → 搜索 size（注意不是 width），能看到浏览器最终解析出的「intrinsic size for srcset selection」，就是当前 sizes 生效后的计算结果。
- 如果显示
100vw，大概率是sizes语法错误或所有媒体查询都不匹配 - 如果显示具体数值如
480px，说明匹配成功，可对照视口宽度和你的媒体查询逻辑验证是否合理 - 配合 Network 面板刷新页面，看实际加载的是
srcset中哪个资源，反推浏览器是否按你预期选择了宽度
真正难的不是写对语法，而是让 sizes 的宽度描述和真实渲染时的图片占用宽度尽量一致——差太多会导致加载过大或过小的图，而这个差距在 CSS 布局嵌套多层后很难肉眼判断。
