picture标签本身不读取DPR，真正实现DPR适配的是img的srcset中1x/2x/3x描述符；浏览器根据devicePixelRatio自动匹配最接近且不小于该值的x项，无需JavaScript，兼容性好；仅当需同时适配视口宽度与DPR时，才结合source的media和img的srcset。
picture 标签本身不直接读取 DPR，得靠 srcset + x 描述符
浏览器不会主动把设备像素比（DPR）暴露给 <picture> 的匹配逻辑——<source> 的 media 属性只认 CSS 媒体查询（比如 (min-resolution: 2dppx)），而 srcset 的 x 描述符才是专为 DPR 设计的机制。所以真正起作用的是 srcset 里的 2x、3x 这类值，不是 <picture> 的结构本身。
常见错误是以为写个 media="(min-resolution: 2dppx)" 就能精准触发 2x 图，但实际中：
– 不同浏览器对 dppx 解析有差异（尤其 Safari 旧版本）
– 部分安卓 WebView 忽略该查询
– 它无法和尺寸切换（如不同 viewport 宽度）协同工作
- 优先用
srcset+x：简洁、兼容性好、浏览器原生支持 DPR 判断 - 仅当需要「按 DPR + 按宽度」双重条件时，才配合
<source>的media和srcset -
<img>的sizes属性必须配对使用，否则srcset中的w描述符会失效（但x描述符不依赖sizes）
正确写法：img 标签内联 srcset + x，picture 仅作格式/类型兜底
绝大多数场景下，你根本不需要 <picture> 来处理 DPR 切换。直接在 <img> 上用 srcset 就够了：
<img
src="photo-1x.jpg"
srcset="photo-1x.jpg 1x,
photo-2x.jpg 2x,
photo-3x.jpg 3x"
alt="示例">
这样浏览器会自动根据当前设备 DPR 选最接近的资源。如果硬要用 <picture>，它更适合做「格式降级」或「艺术指导」，比如：
立即学习“前端免费学习笔记（深入）”；
- 提供
webp/avif格式，fallback 到jpg - 在小屏上用裁剪版图，大屏用完整版（这时用
w描述符 +sizes） - DPR 切换仍交给内部
<img>的srcset，不是靠<source>的media
为什么不要用 media="(min-resolution: 2dppx)" 做 DPR 分发
这个写法看似直觉，但实际落地问题多：
- Windows 缩放设置（如 125%、150%）会让
devicePixelRatio返回小数（如 1.25），但2dppx是布尔匹配，无法覆盖 - CSS 媒体查询中的
dppx单位在部分 iOS 版本中被解释为dpi，导致误判 - 没有 fallback 机制：如果
<source media="(min-resolution: 2dppx)">匹配失败，浏览器会退回到<img>的src，但那个src往往是 1x 图，画质骤降 - 无法与响应式布局联动——比如同一张图在 375px 宽度下要 2x，在 768px 下要 1x，
media查询写起来极绕
真要兼顾 DPR 和视口宽度？用 w 描述符 + sizes + media 组合
当你要同时适配「不同 DPR」和「不同容器宽度」（比如卡片图在移动端占满屏、桌面端只占 400px），就得放弃 x，改用 w 描述符，并配 sizes：
<picture>
<source
media="(max-width: 768px)"
srcset="photo-320w.jpg 320w,
photo-640w.jpg 640w,
photo-960w.jpg 960w"
sizes="100vw">
<source
media="(min-width: 769px)"
srcset="photo-400w.jpg 400w,
photo-800w.jpg 800w,
photo-1200w.jpg 1200w"
sizes="400px">
<img src="photo-400w.jpg" alt="示例">
</picture>
这时浏览器先看 media 选 <source>，再根据 sizes 和视口宽度算出“目标显示宽度”，最后从 srcset 里挑最匹配的 w 资源——这个过程会隐式考虑 DPR（比如 640w 在 2x 屏上刚好填满 320px 容器）。
注意：sizes 值必须真实反映元素最终渲染宽度，写错会导致选图偏差；srcset 中的 w 值应是原始图的固有宽度，不是压缩后体积。
复杂点在于，你得预估所有可能的 DPR × 宽度组合，生成足够密集的图源集——这正是为什么多数项目只用 x 描述符，简单可靠。
