sizes属性用于声明图片在页面布局中的预计显示宽度，需与srcset配合使用，浏览器据此选择最适配的图像资源；其值必须为vw、px等单位，不可用%，且末尾须有默认值。
sizes 属性本身不负责“适配屏幕”，而是告诉浏览器：在当前页面布局下，这张图片**预计会显示多宽**，以便浏览器从 srcset 中选择最合适的图像资源。它必须和 srcset 配合使用，单独写 sizes 没有效果。
理解 sizes 的核心逻辑
浏览器加载图片前，需要预判它的渲染宽度（单位是 CSS 像素），才能决定下载哪张分辨率的图。而这个宽度不是由屏幕物理尺寸决定的，而是由 CSS 布局决定的——比如一个占满视口 50% 宽度的图片，在 1200px 宽的屏幕上就是 600px，在 400px 宽的手机上就是 200px。sizes 就是用来声明这种“布局宽度”的表达式。
常见 sizes 写法与对应场景
以下写法都基于 srcset 已提供多个宽度标记的图像源（如 photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w）：
-
固定宽度容器：图片始终显示为 300px 宽
sizes="300px" -
全宽响应式图片：图片宽度 = 视口宽度（如 banner 图）
sizes="100vw" -
栅格布局中的图片：在桌面端占 6 列（假设 12 列栅格，每列 8.33%），移动端占满一行
sizes="(min-width: 768px) 50vw, 100vw" -
带边距或内边距的图片：图片内容区占视口 90%，两侧各留 5% 边距
sizes="90vw"
关键注意事项
-
不能用百分比值直接写（如
sizes="50%"）——语法错误，必须是vw、px、em等绝对或视口单位 -
媒体查询条件中不要加空格：写
(min-width:768px)，不是(min-width: 768px)（部分旧浏览器可能解析失败） -
最后一个逗号后必须跟一个默认值：比如
sizes="(min-width: 1024px) 600px, 100vw"，末尾的100vw是兜底，不可省略 -
CSS 实际渲染宽度优先级更高：如果 CSS 设置了
width: 200px，但sizes="100vw"，浏览器仍以 CSS 计算出的实际宽度为准选图（现代浏览器会重新评估），但初始选择仍依赖sizes
配合 srcset 的完整示例
一个适配移动端和桌面端的响应式头图：
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w,
photo-1600.jpg 1600w"
sizes="(max-width: 480px) 100vw,
(max-width: 1023px) 50vw,
1200px"
alt="风景照">
解释：
– 屏幕 ≤ 480px 时，图片占满视口宽度 → 浏览器倾向选 400w 或 800w 图
– 屏幕 481–1023px 时，图片占视口一半 → 可能选 800w 或 1200w 图
– 屏幕 ≥ 1024px 时，图片固定显示为 1200px 宽 → 优先选 1200w 或 1600w 图
