本身不自动适配高分屏，必须配合media条件或srcset的x描述符（如2x）显式声明加载规则；否则浏览器直接回退至兜底图，导致dpr=2设备仍加载1x图而出现模糊。
<picture></picture> 本身不直接“适配高分屏”，它只是按条件加载不同资源的容器。真正起作用的是 srcset 中的 2x、3x 描述符，或 media 查询中对 min-resolution 的判断。
为什么 <picture></picture> 单独写没用
只写 <picture><source srcset="img@2x.png"></source><img src="img.png"></picture>，浏览器不会自动选 @2x 版——它需要明确告诉浏览器“在什么条件下用哪个图”。否则 fallback 的 <img> 会被直接加载，<source></source> 形同虚设。
常见错误现象：window.devicePixelRatio 是 2，但页面仍加载了 1x 图，文字边缘发虚、图标有锯齿。
- 必须为
<source></source>显式提供media或srcset+sizes，不能只靠文件名猜测 -
srcset中的x描述符只匹配设备像素比（DPR），不匹配 CSS 像素宽度或缩放设置 - 如果用了
media="(min-resolution: 192dpi)"，注意 Firefox 不支持min-resolution，需加-moz-min-resolution兼容
srcset + x 描述符是最简方案
适用于图标、头像、按钮等尺寸固定、DPR 是主要区分维度的场景。浏览器根据 window.devicePixelRatio 自动选图，无需 JS 干预。
<picture><source srcset="logo@1x.png, logo@2x.png 2x, logo@3x.png 3x"></source> @@##@@ </picture>
- 不要省略 1x 版本：它是所有浏览器的兜底，包括不支持
srcset的旧 IE -
logo@2x.png必须是物理尺寸为 2 倍（如 200×200）的图，而非 CSS 宽高设为 100×100 的 1x 图放大而来 - 若图宽高不固定（比如响应式 banner），
x描述符失效，必须改用w描述符 +sizes
用 media 匹配 min-resolution 更可控
适合需要精细控制渲染逻辑的场景，比如同一张图在 DPR≥2 时强制加载 SVG（矢量无损），DPR=1 时用 PNG；或在 Windows 125% 缩放（DPR=1.25）下也启用高清资源。
<picture><source media="(min-resolution: 192dpi)" srcset="icon.svg"><source media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)" srcset="icon@2x.png"> @@##@@ </source></source></picture>
-
192dpi≈ DPR=2（因为 96 × 2 = 192），但 DPR=1.25 对应 120dpi，若想覆盖，需写min-resolution: 120dpi -
2dppx是更现代的标准写法，Chrome/Firefox/Edge 均支持，dppx= dots per px = DPR - 多个
<source></source>按顺序匹配，第一个满足条件的生效，所以高分辨率规则要放在前面
容易被忽略的细节：CSS 尺寸与图片实际渲染
即使 <picture></picture> 正确加载了 @2x 图，如果父容器 CSS 宽高是固定像素（如 width: 100px），而图本身是 200×200，浏览器仍会缩放渲染——可能模糊，尤其字体区域。
- 确保图片容器使用相对单位（
%、rem）或max-width: 100%，避免硬编码像素宽高 - 对
<img src="logo@1x.png" alt="Logo">设置image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Firefox），可抑制插值模糊（仅对位图有效） - SVG 作为
<source></source>时无需@2x，但需确认其viewBox和路径精度足够，否则小尺寸下仍会糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
