srcset与sizes组合易出错的5种场景：1. sizes值缺单位；2. w描述符与sizes显示宽不匹配；3. sizes用不支持的媒体条件如min-resolution；4. srcset混用w和x描述符；5. sizes媒体条件顺序错误致误匹配。
srcset 和 sizes 组合写法最容易出错的5种常见场景
很多人以为只要写了 srcset 和 sizes，浏览器就能自动选对图——其实不然。这两个属性必须严格匹配逻辑，稍有偏差，就可能白写、错选、加载大图或触发回退到 src。以下是实际开发中最常踩坑的5种写法。
1. sizes 值没加单位（比如漏写 "px" 或 "vw"）
sizes 的每个断点值必须带合法单位，否则整个属性会被浏览器忽略，导致 srcset 降级为“无 sizes 模式”，仅按像素密度（x 描述符）匹配，完全无视视口宽度。
- ❌ 错误：
sizes="(max-width: 768px) 100, 50"（缺单位） - ✅ 正确：
sizes="(max-width: 768px) 100vw, 50vw"或"(max-width: 768px) 320px, 480px" - ⚠️ 注意：纯数字（如
100）不是有效长度，100px和100vw才是
2. srcset 中的宽度描述符（w）与 sizes 计算出的显示宽度不对应
sizes 告诉浏览器“这张图在当前视口下打算显示多宽”，srcset 中的 w 描述符则声明“这张图文件本身的固有宽度”。浏览器会用二者做比值，选出最接近设备像素比（DPR）× 显示宽度的源。
- ❌ 常见错误：sizes 写了
"50vw"，但 srcset 只提供400w, 800w, 1200w，而当前视口宽 1200px → 显示宽度 = 600px → 浏览器倾向选 800w（≈1.33x），但若设备是 2x 屏，理想应选 1200w（=2×600）；若没提供 1200w，就可能退到 800w 甚至更小 - ✅ 建议：sizes 对应的显示宽度区间，应在 srcset 中覆盖「最小显示宽 × DPR」到「最大显示宽 × DPR」范围，例如 sizes="100vw" 且支持 1x~3x 屏，srcset 至少含
320w, 640w, 960w, 1280w等阶梯
3. sizes 使用了未被支持的媒体条件（如 min-resolution）
不是所有 CSS 媒体特性都能用在 sizes 中。浏览器只支持有限子集，比如 width、height、min-width、max-width、orientation，但 resolution、prefers-color-scheme 等不被允许。
- ❌ 错误：
sizes="(min-resolution: 2dppx) 50vw, 100vw"→ 整个 sizes 被忽略 - ✅ 替代方案：用
srcset的x描述符处理像素密度（如logo.png 1x, logo@2x.png 2x），sizes专注布局宽度逻辑 - ? 提示：可用 Chrome DevTools 的 Network 面板看最终加载哪张图，再比对 Elements 面板中 sizes 解析是否生效（灰色表示无效）
4. srcset 混用 w 和 x 描述符（同一属性里同时写 400w 和 2x）
srcset 属性内部不能混用宽度描述符（w）和像素密度描述符（x）。浏览器遇到混合写法会直接忽略整个 srcset，退回到 src。
- ❌ 错误：
srcset="small.jpg 400w, big.jpg 2x" - ✅ 正确二选一：
- 用
w：适合响应式布局（推荐），srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" - 用
x：适合固定尺寸图标/头像，srcset="icon.png 1x, icon@2x.png 2x"
- 用
- ⚠️ 注意：
src在w模式下作为 fallback（当无匹配 w 时），在x模式下仅用于 1x 设备；混用会让 fallback 逻辑失效
5. sizes 中的媒体条件顺序错误，导致高优先级断点被跳过
sizes 的匹配规则是“从左到右，取第一个为 true 的条件”。如果把宽屏条件写前面，窄屏条件写后面，小屏幕设备反而会命中宽屏规则。
- ❌ 错误：
sizes="(min-width: 768px) 50vw, (max-width: 767px) 100vw"→ 在 400px 宽屏幕上，min-width: 768px为 false，继续判断下一个；但若写成"(min-width: 768px) 50vw, 100vw"（无条件兜底），那就永远匹配第一个 false 后的默认值，没问题；真正危险的是下面这种： - ❌ 更隐蔽的错：
sizes="(max-width: 992px) 100vw, (max-width: 768px) 80vw"→ 768px 屏会同时满足两个条件，但只取第一个，结果用了 100vw，而非预期的 80vw - ✅ 正确写法：按视口从大到小（或从小到大）严格排序，常用移动优先：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, (max-width: 992px) 60vw, 40vw"
