应使用 min-resolution: 2dppx 判断 retina 屏，因 dppx 基于 css 像素比更稳定；1dppx=1 css 像素，2dppx 表示 1 css 像素由至少 2×2 物理像素渲染；避免混用 dpi 与 dppx，防止误触发。
怎么用 resolution 媒体查询判断 Retina 屏
直接看设备像素比（dpr）比看分辨率数字更靠谱。resolution 查询本质是查每英寸物理像素数（dpi 或 dpcm），但实际开发中几乎没人真用 96dpi 这种绝对值，因为系统缩放、浏览器实现差异太大。更稳的方式是用 min-resolution: 2dppx ——dppx 是 “dots per px”，1dppx = 1 CSS 像素 = 1 设备独立像素，2dppx 就代表 1 个 CSS 像素由至少 2×2 个物理像素渲染，基本覆盖所有主流高分屏。
常见错误现象：min-resolution: 192dpi 在 Windows 缩放 125% 的笔记本上可能不触发，而 min-resolution: 2dppx 能稳定命中。
-
dppx单位兼容性好，Chrome 29+、Firefox 16+、Safari 8+、Edge 12+ 都支持 - 避免混用单位，比如
min-resolution: 2dppx, 192dpi—— 多条件媒体查询是“或”逻辑，反而容易误触发 - Mac Safari 对
dppx支持没问题，但旧版 iOS Safari（-webkit-min-device-pixel-ratio
background-image 怎么配两套图才不糊
不是简单写两个 background-image 覆盖就行。CSS 层叠规则会让后写的覆盖前写的，必须用媒体查询把高清图“锁死”在高分场景下，否则低分屏也会加载 @2x 图，浪费带宽还可能因尺寸错位导致拉伸。
使用场景：按钮图标、logo、状态小图标这类固定尺寸、对清晰度敏感的元素。
立即学习“前端免费学习笔记（深入）”；
- 基础图用
1x尺寸（如icon-home.png宽高 16×16），高清图用@2x命名且尺寸翻倍（icon-home@2x.png宽高 32×32） - 低分屏样式写在普通选择器里，高清图用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)包裹 - 别漏掉
background-size: contain或具体数值（如16px 16px），否则 @2x 图会按原图尺寸显示，变成 32×32 像素占满 16×16 的容器，严重模糊
button.home {
background-image: url('icon-home.png');
background-size: 16px 16px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
button.home {
background-image: url('icon-home@2x.png');
}
}
为什么 image-set() 现在还不能当主力用
image-set() 理论上能一条声明搞定多倍图，但现实是它目前只有 Chrome 和 Safari 支持，Firefox 完全不认，而且连基本 fallback 都没标准方案——如果浏览器不支持 image-set()，它就直接当无效值丢弃，退化成空背景。
性能影响：它本身不触发额外请求，但解析和切换依赖浏览器实现，某些旧版 Safari 在滚动时切换图会有轻微闪烁。
- 语法必须带单位，
image-set(url(icon.png) 1x, url(icon@2x.png) 2x)中的1x/2x不可省略 - 不能和
background-size混写在同一声明里，得拆成两条；否则整条声明可能被忽略 - CI/CD 构建时如果用 PostCSS 插件自动补
image-set()，要确认目标浏览器覆盖率，否则上线即白屏风险
SVG 图标比 PNG 更省心，但要注意这几点
SVG 本质是矢量，天生适配任意缩放，不用管 dpr。但它不是万能的——文件体积、渲染性能、兼容性细节仍会踩坑。
使用场景：线性图标、logo 文字、状态指示器等结构简单、颜色不多的图形。
- 内联 SVG（
<svg><path></path></svg>）最可控，支持伪类变色、CSS 动画，但无法被 HTTP 缓存 - 外链 SVG（
background-image: url(icon.svg)）可缓存，但 IE11 及更早版本不支持 SVG 作为背景图 - 导出时关掉 Sketch/Figma 的「响应式」选项，否则 SVG 里带
viewBox但无宽高，可能被浏览器按 300×150 默认尺寸渲染变形 - 不要在 SVG 里嵌 PNG，那又回到分辨率问题，失去矢量优势
<img alt="CSS如何适配高分屏设备图标_利用resolution媒体查询设置高清css图片" >、SVG、字体图标）都走同一套逻辑，稍有遗漏，那个地方就糊。 
