响应式图片易错的5种场景：1. sizes值漏单位；2. srcset描述符与图片固有宽度不匹配；3. sizes媒体条件顺序错误；4. img缺少width/height致CLS；5. sizes误写在source标签内。
srcset 和 sizes 是响应式图片的核心，但写法稍有偏差就会导致浏览器加载错误尺寸的图片、浪费带宽，甚至图片不显示。以下是最容易出错的 5 种典型场景，每种都附带正确写法和关键提醒。
1. sizes 值没加单位（比如漏掉 vw 或 px）
常见错误：sizes="50" 或 sizes="100" —— 浏览器无法解析纯数字，直接忽略 sizes，退化为默认行为（通常按 100vw 处理）。
正确写法：
-
sizes="(max-width: 768px) 100vw, 50vw"✅ -
sizes="300px"✅（固定宽度也必须带单位） -
sizes="(min-resolution: 2dppx) 50vw, 100vw"✅（媒体条件 + 值都要合法）
2. srcset 中的描述符与实际图片尺寸不匹配
比如提供了一张 1200×800 的图，却标成 1200w，但它的自然宽度其实是 600px（CSS 缩放到 2×），这时应标 600w，因为 w 描述符指的是图片文件的**固有像素宽度**（intrinsic width），不是 CSS 渲染宽度，也不是设备像素比。
关键判断：
-
1200w→ 图片文件本身宽度是 1200 像素 -
2x→ 该图专为 dpr=2 的设备准备（如 iPhone），且尺寸应与 1x 版本一致（比如 1x 是 600w，2x 就该是 1200w 的同构图） - 混用
w和x时，w必须覆盖所有断点所需，x仅作密度补充，二者不要交叉混乱
3. sizes 媒体条件顺序错误，导致匹配失效
sizes 是从左到右匹配第一个为 true 的条件，所以必须把更具体的条件放前面，否则宽泛条件（如 100vw）会提前截断。
错误写法：sizes="100vw, (max-width: 768px) 50vw" → 永远匹配第一个，后面无效。
正确写法：
-
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"✅ - 移动端优先，条件由窄到宽排列
- 末尾可加一个无条件兜底值（如
33vw），确保总有 fallback
4. img 标签缺少 width 和 height 属性（引发布局偏移 CLS）
srcset/sizes 本身不解决布局抖动。如果没设 width 和 height，浏览器无法预留空间，图片加载后重排，触发 CLS（累积布局偏移）。
正确做法：
- 显式写
width="600" height="400"（对应 1x 尺寸） - 配合 CSS
img { width: 100%; height: auto; }实现响应式缩放 - 现代推荐：用
aspect-ratio: 3 / 2替代宽高属性（兼容性需检查）
5. 在 <picture> 中误用 sizes，或把它写在 <source> 上却忘了写 media
sizes 只能出现在 <img> 标签上，不能写在 <source> 里；而 <source> 要生效，必须配 media 或 type，否则被忽略。
典型错误：
-
<source srcset="..." sizes="50vw">❌（sizes 无效） -
<source srcset="..."></source>❌（没 media/type，不会参与选择） - 正确结构：
<picture><source media="(max-width:768px)" srcset="..."><img src="..." srcset="..." sizes="..."></picture>✅
不复杂但容易忽略，多检查一遍 srcset 的 w/x 是否对得上图、sizes 的单位和顺序是否合理、img 是否有宽高占位——这三处齐了，响应式图片就稳了。
