srcset 的 1x/2x 仅在 img 标签且无 sizes 时生效；picture 中 source 的 2x 被无视，media 与 x 描述符互斥；验证需查 network 面板实际请求。
srcset 的 1x/2x 只在 img 标签上生效，且不能带 sizes
浏览器对设备像素比（DPR）的自动匹配，只发生在 img 元素的 srcset 属性中，并且必须同时满足两个条件：一是用 1x/2x 描述符，二是没写 sizes。一旦你在 img 上加了 sizes="(max-width: 768px) 100vw"，哪怕只是占位，2x 就彻底失效——浏览器会切到「宽度匹配模式」，完全忽略 DPR。
常见错误包括：
-
<picture><source srcset="a@2x.jpg 2x"><img src="a@1x.jpg"></source></picture>→source中的2x被无视，浏览器只加载第一个source的首个资源 -
<img srcset="a@1x.jpg 1x, a@2x.jpg 2x" sizes="100vw">→sizes存在，x描述符被丢弃，退化为按视口宽度选图 -
srcset="a@2x.jpg 2x"（两个空格）→ 整个srcset值被解析为无效，回退到src
picture 里的 source 不能混用 media 和 2x
source 的作用是“条件性候选”，不是“DPR 切换器”。只要它带了 media（比如 media="(min-width: 768px)"），它的 srcset 就只按顺序取第一个可用项，1x/2x 不参与决策。也就是说，你写了 srcset="b@1x.jpg 1x, b@2x.jpg 2x"，但只要 media 匹配成功，浏览器就直接加载 b@1x.jpg，根本不会看后面的 2x。
想兼顾屏幕宽度和 DPR，正确结构是：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
source处理格式降级（type="image/webp"）或大范围尺寸切换（media） - 把 DPR 适配逻辑全交给最外层的
img的srcset，且确保它没配sizes -
source必须在img前面，否则整个picture结构失效
验证 2x 是否真被加载，别猜，看 Network 面板
最可靠的验证方式不是检查控制台报错，也不是靠 window.devicePixelRatio 打印值，而是直接观察实际发出的图片请求：
- 打开 Chrome DevTools → Network 面板 → 刷新页面
- 筛选类型为
Img，找到对应图片资源 - 右键 →
Copy image src→ 粘贴进新标签页，确认 URL 是@2x.jpg还是@1x.jpg - 再切到 DevTools → ⚙️ → Sensors → Device pixel ratio → 改成 1 或 2，刷新对比
注意：模拟器里改 DPR 后必须硬刷新（Ctrl+Shift+R 或 Cmd+Shift+R），普通刷新可能走缓存，看不到真实加载行为。
高 DPR 设备下图片模糊？大概率是 CSS 拉伸或资源缺失
即使 2x 图片成功加载，仍可能模糊，原因往往不在 picture 结构本身：
-
img元素被 CSS 强制设了固定宽高（如width: 300px; height: 200px），导致 600×400 的@2x图被压缩进 300×200 容器，像素信息丢失 - 没加
max-width: 100%; height: auto，图片超出父容器后被裁剪或失比例 - 提供的
@2x图分辨率不够（比如只给了 400×300 的@2x，但设备需要 800×600）
真正容易被忽略的是：DPR 匹配只发生在 img[srcset] 这一层，且与 media、sizes、type 完全互斥；任何试图在一个属性里塞多个维度（比如既写 media 又写 2x）的写法，都会让浏览器放弃 DPR 判断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
