sizes属性是HTML中声明图片在各断点下CSS宽度的提前告知机制，格式为(media condition) width-value，兜底值必存，单位限vw/px/%，不支持calc()或CSS变量，须与srcset的w值匹配且严格对应实际布局宽度。
sizes 属性不是靠“计算”出来的，而是根据图片在页面中实际占位的 CSS 宽度来声明的。它本身不参与任何数学运算，只告诉浏览器：“在这个断点下，这张图会显示成多宽”。
如果你硬要套公式，那唯一有效的就是：sizes 值 = 图片容器在对应视口下的 CSS 宽度（单位必须是 vw、px 或百分比）
sizes 的值怎么写才对？
- 浏览器不会猜你图片多宽，它只信
sizes里写的值 - 每一项格式是：
(media condition) width-value，用逗号分隔 - 最后一项是“兜底值”，没有媒体条件，必须存在
常见错误现象：
- 图片在手机上加载了 1200w 的大图 →
sizes没写或写成了100vw（没做断点适配） - 图片模糊 →
sizes声明的宽度远小于实际渲染宽度，导致浏览器选了过小的候选图 - 页面布局偏移（CLS）→
sizes和真实容器宽度不一致，浏览器预留空间不准
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 一个全宽 banner 图：移动端 100% 宽，桌面端固定 800px
- 一个卡片内嵌图：卡片在移动端占满，桌面端三列，每张图约 33vw
- 一个侧边栏头像：始终固定 64px，和视口无关
正确写法示例：
<img src="fallback.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 50vw, 33vw" alt="描述">
这表示：
- 屏幕 ≤ 480px 时，图占满视口（100vw）
- 屏幕在 481px–900px 之间时，图占视口一半（50vw）
- 其他情况（比如桌面端），图占视口 33vw
注意：这里的 33vw 不是“平均值”，而是你确认该图在桌面布局中确实会渲染为约 33% 视口宽度 —— 它必须和 CSS 中最终生效的 width 或 max-width 一致。
为什么不能直接用 CSS 的 width 替代 sizes？
因为浏览器在解析 HTML 阶段就需决定加载哪张图，而此时 CSS 还没加载、没计算、没应用。sizes 是 HTML 层面的“提前声明”，让浏览器在发起图片请求前就能估算出需要多少物理像素。
所以：
- 如果你用
width: 100%+max-width: 600px，sizes就不能只写100vw - 必须按断点还原出每个区间下它的有效显示宽度，例如：
(max-width: 600px) 100vw, 600px
容易被忽略的关键点
-
sizes和srcset中的w描述符必须能对得上：浏览器用sizes算出“我要显示多宽”，再从srcset里挑最接近且不小于该宽度的候选图 - 如果你写了
sizes="50vw"，但srcset里只有400w, 600w，而当前视口是 1200px（即 50vw = 600px），浏览器就会选600w—— 刚好，没问题；但如果视口是 1400px（50vw = 700px），它还是只能选600w，结果可能模糊 -
sizes不支持 calc()、不支持 CSS 变量，也不能写min(100vw, 800px)—— 所有逻辑必须拆成明确的媒体条件
真正难的不是写法，而是你要清楚：这张图在每种设备尺寸下，CSS 最终给它分配了多少空间。这个判断一旦错，sizes 就失去意义。
