srcset中x描述符表示设备像素比，w描述符表示图片固有宽度；是否生效取决于是否配合sizes属性——无sizes时按x匹配dpr，有sizes时仅按w匹配布局宽度。
srcset 里写的到底是像素密度还是图片宽度
很多人一上来就写 srcset="img-1x.jpg 1x, img-2x.jpg 2x"，结果发现高清屏没加载 2x 图——因为浏览器根本没按你预期的“设备像素比”选图。srcset 的 1x/2x 确实表示设备像素比（dpr），但它只在没有 sizes 属性时才生效；一旦加了 sizes，浏览器就切换成“宽度匹配模式”，完全忽略 x 单位，只看后面带 w 的描述。
所以关键判断点是：你要控制的是「设备类型」（比如只给 Retina 屏发高分图），还是「布局尺寸」（比如在小屏上只显示 320px 宽的图，那就没必要加载 1200px 的大图）？前者用 x，后者必须配 sizes + w。
sizes 属性不写或写错会导致 srcset 形同虚设
sizes 不是可选的“锦上添花”，而是告诉浏览器“这张图在页面中最终会占多宽”的关键线索。如果省略它，浏览器只能假设图片会占满视口宽度（100vw），然后从 srcset 中挑最接近的那个 w 值——这往往导致小屏也加载大图。
常见错误写法和修正建议：
- 错：
sizes="(max-width: 768px) 100vw, 50vw"—— 没指定默认值，某些旧浏览器会 fallback 到100vw - 对：
sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw, 50vw"或更稳妥地补上兜底：sizes="(max-width: 768px) 100vw, 50vw"（现代浏览器已支持无兜底写法，但 Safari 13.1 之前需要） - 错：
sizes="50vw"配srcset="img-small.jpg 320w, img-large.jpg 1200w"—— 浏览器发现 50vw 在小屏下可能只有 180px，却没提供更小的w选项，只能硬选 320w，造成浪费
如何组合 srcset + sizes 实现真正按布局宽度加载
典型场景：一张 banner 图，在移动端占满屏幕（100vw），桌面端固定为 800px 宽。你需要提供多个宽度版本，并让浏览器根据实际渲染宽度选最合适的那个。
正确写法示例：
@@##@@
说明：
- 每个
srcset条目后必须跟w单位，表示该图片文件的**固有宽度**（不是显示宽度） -
sizes中的800px是 CSS 像素值，浏览器据此计算“当前环境下这张图大概渲染多宽”，再匹配srcset中最接近的w值 - 不要指望浏览器自动缩放图片——它只做选择，不处理渲染；确保你提供的
img-320.jpg真的是 320 像素宽的原图 - 如果使用 CSS 设置了
max-width: 100%，不影响sizes计算，因为sizes描述的是“预期宽度”，不是最终渲染结果
Chrome DevTools 里怎么验证 srcset 是否生效
光看页面表现不够，得确认浏览器到底请求了哪张图。打开 Chrome DevTools → Network 面板 → 刷新页面 → 找到对应图片资源，看它的 Request Headers 里的 Sec-Ch-Dpr 和 Sec-Ch-Viewport-Width（需开启实验性功能），更重要的是直接看 Preview 或响应头里的实际文件名。
快速验证技巧：
- 临时把
sizes改成sizes="320px"，刷新后应看到加载的是img-320.jpg；再改成sizes="1200px"，应加载img-1200.jpg - 用 Device Toolbar 切换不同分辨率设备，观察 Network 面板中请求的图片是否变化
- 注意：禁用缓存（勾选 Disable cache）否则可能复用旧请求
- 如果始终只加载
src指定的图，检查是否拼错了srcset或sizes属性名（比如写成srset）
真正容易被忽略的是：即使写了完整的 srcset + sizes，如果服务器返回了错误的 Content-Type（比如把 JPG 当 text/plain），浏览器也会降级回 src。所以验证时别只盯 HTML，也要看响应头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
