w描述符用于响应式宽度匹配，需配合sizes属性指定图片CSS宽度；x描述符用于设备像素比匹配，不依赖sizes，二者不可混用，否则浏览器解析异常且兼容性差。
srcset 中的 w 和 x 描述符根本不是同一类东西：一个按**宽度条件**匹配（需配合 sizes），另一个按**设备像素比**（DPR）匹配，用错就完全失效。
什么时候该用 w 描述符？
当你需要根据视口宽度或容器宽度，让浏览器从多个等比例缩放的图片中选最合适的尺寸时——比如响应式布局里不同断点下加载不同宽高的 jpg 或 webp。
关键前提是必须同时提供 sizes 属性，否则浏览器无法知道“这个 img 在页面中会占多宽”，w 就失去参照依据。
-
w后面的数值是图片源本身的**固有像素宽度**（如800w表示这张图原始宽 800px） -
sizes值描述的是“在不同视口下，这张图将渲染的**CSS 宽度**”，例如sizes="(max-width: 768px) 100vw, 50vw" - 浏览器结合两者，计算出“当前应加载的最小足够宽的源”，避免下载过大图
- 错误写法：
<img srcset="a-400.jpg 400w, a-800.jpg 800w">（缺sizes→ 浏览器退化为只用第一个源）
什么时候该用 x 描述符？
当你只关心设备像素比（DPR），比如想给 Retina 屏发 2x 图、普通屏发 1x 图，且图片显示尺寸固定（比如 logo 总是 100px × 100px CSS 宽高）。
它不依赖 sizes，语义更简单：直接告诉浏览器“这张图适用于多少倍 DPR 的设备”。
-
x后面是浮点数，代表设备像素比，如1x、1.5x、2x - 浏览器读取设备
window.devicePixelRatio，匹配最接近且不小于该值的描述符 - 常见误用：混用
w和x在同一个srcset里（语法合法但逻辑混乱，浏览器行为不可靠） - 正确示例：
<img src="logo-1x.png" srcset="logo-1x.png 1x, logo-2x.png 2x">
为什么 w 和 x 不能混用？
因为浏览器解析 srcset 时，会先判断整个列表是 w-type 还是 x-type —— 只要有一个 x，整个列表就被视为 x 模式，所有 w 数值会被忽略或导致解析失败。
- Chrome/Firefox 对混用的处理不一致：有的跳过非法项，有的直接降级用
src - 即使看似生效，也极难调试 —— 你看到的“对了”，可能是巧合而非预期逻辑
- 构建工具（如 Webpack + responsive-loader）若自动生成混用
srcset，务必检查输出是否被强制归一化 - 真正需要兼顾宽度和 DPR 的场景，应该用
<picture>+media+ 多个source，而不是硬塞进一个srcset
最容易被忽略的一点：无论用 w 还是 x，src 属性都仍是必填降级兜底项。很多线上页面在低版本 Safari 或网络异常时白屏，就是删掉了 src，以为 srcset 能覆盖一切。
