的srcset不支持x单位，仅支持w单位配合media做宽度适配；高dpr适配必须放在最外层的srcset中，用1x/2x实现。
picture里的srcset不支持2x/3x密度匹配
浏览器根本不会解析1x、2x描述符——哪怕你写icon@2x.png 2x，它也只当普通URL处理，完全忽略DPR。这是HTML规范明确规定的：只有最外层<img>的srcset才支持x单位。所以别在<source></source>里混用x和w，写了也白写。
source的srcset只能靠media + w描述符做宽度适配
<source></source>的srcset唯一可靠用法是配合media做视口断点切换，并且所有资源必须用w单位（如photo-400w.jpg 400w）。浏览器按media顺序匹配，选中第一个满足条件的<source></source>后，再从它的srcset里挑最接近sizes计算出的渲染宽度的那张图。
- 错误：
<source media="(max-width: 480px)" srcset="small.png 1x, small@2x.png 2x"></source>→2x被无视，小屏永远加载small.png - 正确：
<source media="(max-width: 480px)" srcset="small-320w.jpg 320w, small-640w.jpg 640w"></source>→ 小屏下浏览器根据sizes决定取哪张 - 注意：
<source></source>之间media条件不能重叠，否则后面的根本没机会执行
高DPR屏幕适配必须把x描述符挪到最外层img的srcset里
如果目标是让Retina屏自动加载双倍图，<picture></picture>结构本身不是必需的。更直接的做法是去掉<source></source>，直接用<img srcset="btn-1x.png 1x, btn-2x.png 2x">。只要不加sizes，浏览器就会严格按devicePixelRatio选图。
- 要同时兼顾宽度断点+DPR，得组合使用：
<source></source>负责宽度分组（比如手机/平板/桌面），每个<source></source>内部的srcset用w；最外层<img>的srcset再补上1x/2x——但这样会冲突，不推荐 - 真正可靠的三重适配（宽度+DPR+格式）是：
<source type="image/avif"></source>和<source type="image/webp"></source>做格式降级，<source media></source>做宽度断点，最后<img srcset="... 1x, ... 2x">兜底DPR - 验证是否生效，唯一方式是打开DevTools Network面板，看实际请求的URL，别信
window.devicePixelRatio值
常见失效原因：路径、缓存、兜底缺失
写了<source></source>却始终只加载<img>的src，大概率不是语法问题，而是这些硬伤：
-
srcset里写的路径404了，浏览器静默跳过该<source></source>，继续往下找，直到找到可用的或退到<img> - 漏写
<img>标签，导致无兜底，某些浏览器直接不渲染图片 - Network面板没勾选
Disable cache，看到的是旧缓存，不是当前逻辑的真实结果 -
media查询写错，比如(max-width: 480px)写成(max-width: 480)（缺单位），整个<source></source>被忽略
<source></source>的srcset从来不是单独扛起多分辨率适配的主力，它只解决“不同宽度下该用哪组图”这半件事。剩下那半件——“同一宽度下，Retina屏要不要双倍图”——得靠<img>自己来。混淆这两层职责，是90%响应式图片失效的根源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
