直接写 sizes="100vw" 大概率加载错图，因为浏览器只信任 sizes 声明的宽度而非实际 css 渲染宽度；若图片真实渲染宽为 calc(100vw - 32px)，但 sizes 仍写 100vw，浏览器会按视口全宽选图，导致小屏加载大图、桌面模糊或布局偏移（cls）。
为什么直接写 sizes="100vw" 大概率加载错图
因为浏览器根本不看你的 CSS，它只信 sizes 里写的值。如果你的图片在移动端实际渲染宽度是 calc(100vw - 32px)（左右各留 16px 边距），但 sizes 还写着 100vw，浏览器就会按 1200px 宽去挑 srcset 里的 1200w 图——哪怕你屏幕只有 375px 宽、图只显示 343px。
常见错误现象：
- 小屏加载 2MB 的 1200w 图，首屏慢、流量浪费
- 桌面端图模糊，因为
sizes写太小，浏览器选了 400w 图但实际渲染要 600px - CLS（布局偏移）明显，
sizes声明的宽度和真实渲染宽度差太多，浏览器预留空间不准
真正该做的：打开 DevTools → Elements → 选中 img → 右侧 Computed 面板看 width 值，在每个断点下记下这个数字，再换算成 vw 或 px 填进 sizes。
sizes 的媒体条件怎么写才不翻车
浏览器从左到右匹配第一个为 true 的条件，没匹配上就用最后的兜底值。所以顺序不能乱，断点必须和你的 CSS 媒体查询完全一致。
实操要点：
- 如果 CSS 在
768px切布局，sizes就得写(max-width: 768px)，别写成767px或769px - 兜底值必须存在，且不能带媒体条件，比如
33vw合法，(min-width: 769px) 33vw是无效写法 - 旧版 Edge（EdgeHTML）对空格敏感，建议写成
(max-width:768px)而非(max-width: 768px) - 单位只能用
vw、px、em，%和calc()都不支持
srcset 用 w 还是 x？混写会怎样
用 w 描述符就必须配 sizes；用 x 描述符则不需要 sizes，但它只认设备像素比，不管布局宽度。
混写直接失效：
-
srcset="a.jpg 1x, b.jpg 800w"→ 整个srcset被忽略，浏览器只加载src -
srcset="a.jpg 400w, b.jpg 2x"→ 同样降级，尤其在 Safari 12.0 及更早版本里 - 固定尺寸图标（如头像、按钮）可用
2x，但响应式内容图一律优先用w+sizes
生成图源时，宽度建议按布局最大可能宽度 × 1.5 准备：比如卡片图 CSS 最大宽 500px，就提供 750w、1000w、1500w 三档，兼顾高清屏和缩放余量。
为什么改了 CSS 布局，图片还是加载错
因为 sizes 不是“一次设置永久有效”的属性，它必须随 CSS 布局变化同步更新。最常被忽略的是这些细节：
- CSS 里写了
max-width: 600px，但sizes没加对应断点，比如漏了(max-width: 600px) 100vw, 600px - 父容器用了
grid或flex，图片占 1/3 栅格，但sizes还写100vw - 内联样式或高优先级 CSS 加了
max-width: 300px，压低了实际渲染宽度，sizes却没感知 -
<picture></picture>场景下，sizes必须写在<img>上，写在<source></source>上无效
真正难的不是写对第一版，而是后续每次改版时，有没有同步检查并更新 sizes —— 它不像 CSS 那样能自动生效，错一点，加载就偏一截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
