<picture>标签不处理DPR匹配，<source>中2x/3x描述符被忽略；DPR适配仅由<img>的srcset（无sizes）实现，含sizes则切换为宽度匹配模式；验证需查网络请求URL而非devicePixelRatio。
<picture> 标签本身不处理屏幕密度（DPR）匹配，所有 2x、3x 描述符在 <source> 中完全被忽略；真正生效的 DPR 适配只发生在最外层 <img> 的 srcset 属性中，且必须不带 sizes。
为什么 <source> 里的 2x 没用
浏览器规范明确要求：<source> 的作用是“条件候选”，不是“DPR 切换器”。只要它带了 media 或 type，它的 srcset 就只按顺序取第一个资源，1x/2x 描述符直接被跳过。
-
<source media="(max-width: 480px)" srcset="icon@2x.png 2x">→ 小屏设备永远加载icon@2x.png，哪怕window.devicePixelRatio === 1 - 想让小屏也按 DPR 切换？必须把
icon@1x.png 1x, icon@2x.png 2x写进末尾<img>的srcset，而不是<source> -
<source>的srcset只负责提供“一张图”，不是“一组密度版本”
<img> 的 srcset + sizes 会禁用 DPR 匹配
一旦你在 <img> 上写了 sizes（哪怕只是 sizes="100vw"），浏览器立刻切换到「宽度匹配模式」，彻底丢弃 1x/2x 逻辑——它会根据 sizes 计算渲染宽度，再从 srcset 中选最接近的 w 候选项。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 按钮、图标等固定尺寸元素，不要加
sizes：直接用srcset="btn@1x.png 1x, btn@2x.png 2x" - 如果真要响应式宽高（比如 banner 图随断点变化），就放弃
x，改用w+sizes：例如srcset="banner-400w.jpg 400w, banner-800w.jpg 800w"，并配sizes="(max-width: 600px) 100vw, 50vw" -
<source>里写sizes是无效的，会被完全忽略
验证是否真加载了高 DPI 图片，别信控制台
window.devicePixelRatio 返回 2 只说明设备支持高 DPI，不代表图片就用了 @2x 版本。唯一可靠方式是看网络请求实际发出的 URL。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Network 面板 → 刷新页面 → 筛选
Img类型 - 找到对应图片 → 右键 →
Copy image src→ 粘贴确认是否含@2x或@3x - 模拟不同 DPR：DevTools → ⚙️ → Sensors → Device pixel ratio → 设为
1/2/3→ 硬刷新（Ctrl+Shift+R），普通刷新可能走缓存 - 检查服务器返回：HTTP 状态码必须是
200，MIME 类型必须是image/png（不是text/plain），否则会降级到src
真正容易被忽略的是：所有 @2x 图片必须和 @1x 完全同构（相同宽高比、相同裁剪区域、相同 CSS 渲染尺寸），否则高倍图被拉伸或缩放就会失真——DPR 适配的前提是“像素对齐”，不是“文件存在”。
