sizes是告诉浏览器图片在各断点下预期渲染宽度的HTML属性，需用媒体条件+长度值（如(max-width: 768px) 100vw, 320px）声明，单位限vw/px/em，不可用%或calc以外的表达式，且必须与CSS实际布局宽度严格一致。
什么是 sizes，它到底要填什么值？
sizes 不是图片宽高，也不是像素值，而是告诉浏览器：“在当前视口条件下，这张图**预期会渲染成多宽**”。浏览器靠这个 + srcset 里的描述（如 300w、2x），才能选中最合适的资源。
常见错误是直接写 sizes="100vw" 就完事——这只有在图片真占满整个视口时才准确。一旦有边距、栅格间隙、响应式布局缩放，实际渲染宽度就变了，选图就会偏大或偏小。
- 用 CSS 媒体查询语法写条件，例如
(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw - 每个条件后跟一个**长度单位值**（
vw、px、em都行），不能是百分比（%） - 浏览器从左到右匹配第一个为 true 的条件；没匹配上则用最后的兜底值
- 如果省略
sizes，浏览器默认按100vw算，极易导致移动端加载桌面图
srcset 里 w 和 x 两种描述怎么选？
srcset 提供候选图源，但必须和 sizes 协同才有意义。关键区别在于：用 w 是基于**布局宽度**选图，用 x 是基于**设备像素比**选图。
优先用 w：它配合 sizes 能真正实现“按需加载”。比如你页面中图在小屏下占 340px 宽、中屏占 500px、大屏占 300px，那 sizes 描述了这些宽度，srcset 就该提供对应 340w、500w、300w 的图源。
-
300w表示“这张图原始宽度是 300 像素”，不是“只给 300px 宽的设备用” -
2x忽略布局变化，只看window.devicePixelRatio，适合固定尺寸 icon 或头像 - 混用风险高：比如
srcset="a.jpg 300w, b.jpg 2x"，浏览器可能因逻辑冲突降级处理 - 生成图源时，建议宽度按实际布局最大可能宽度的 1.5 倍准备（兼顾高清屏），例如布局宽 500px → 准备 750px、1000px、1500px 图
为什么写了 sizes 还加载错图？检查这三处
最常被忽略的是 CSS 实际生效宽度与 sizes 声明不一致。浏览器计算时只信 sizes，不信你写的 width: 100% 或 grid-column: span 2。
- 打开 DevTools → Elements → 选中
img→ 看右侧面板的 **Computed** 里的width值，再对比你sizes在当前断点下解析出的值是否接近 - 检查是否有内联
style或高优先级 CSS 强制设了max-width，它会压低实际渲染宽度，但sizes没感知 - 使用
picture+source时，sizes必须写在img标签上，不能写在source上；否则无效
一个真实可用的响应式图片写法示例
假设设计稿要求：手机竖屏占满宽度（减去左右 16px 边距）、平板横屏占半宽、桌面端固定 320px 宽，且所有设备都要适配 Retina 屏。
@@##@@
注意：calc(100vw - 32px) 是合法的 sizes 值，能精确匹配带边距的场景；而 320px 作为兜底，确保桌面端不会因视口超大就去加载 1280w 的图。
真正难的不是语法，而是把设计稿里的“视觉宽度”准确翻译成 sizes 中的“布局宽度”——CSS 怎么算，你就得怎么写，少一步都会让浏览器猜错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
