min-resolution: 2dppx 最可靠，因dppx与DPR直接对应且不受系统缩放干扰；需搭配-webkit-min-device-pixel-ratio: 2兜底；换@2x图后必须显式设background-size匹配逻辑像素尺寸。
直接用 min-resolution: 2dppx 判断最稳，-webkit-min-device-pixel-ratio: 2 是必须的兜底项；只换图不设 background-size，高清图反而更糊。
为什么 min-resolution: 2dppx 比 192dpi 更可靠
dppx 是“dots per CSS pixel”，和设备像素比（DPR）直接对应：1dppx = DPR=1，2dppx = DPR≥2。而 dpi 值受系统缩放干扰极大——Windows 缩放 125% 时，同一台笔记本可能报 153dpi 或 192dpi，导致 min-resolution: 192dpi 在部分场景完全不触发。实际项目中，min-resolution: 2dppx 在 Chrome 29+、Firefox 16+、Safari 8+、Edge 12+ 全面支持，且语义准确。
常见错误现象：@media (min-resolution: 2dppx), (min-resolution: 192dpi) 这种写法是“或”逻辑，192dpi 在高缩放 Windows 下可能意外命中，把高清样式错加到非 Retina 设备上。
- 永远只用 dppx 单位做密度分层，如
min-resolution: 3dppx适配 iPhone 14 Pro - 旧版 iOS Safari（≤ iOS 12）不支持
min-resolution，必须靠-webkit-min-device-pixel-ratio单独兜底 - 两个条件用逗号分隔：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)，不是括号内并列
background-image 换 @2x 图后必须显式设 background-size
浏览器默认按图片原始物理尺寸渲染背景图。一张 icon@2x.png 是 48×48px，但容器是 width: 24px; height: 24px;，若没写 background-size: 24px 24px，它就会以 48×48 CSS 像素撑满容器，视觉上放大一倍、严重失真。
-
background-size: contain或cover不适合图标——会变形或裁切关键区域 - 尺寸必须按设计稿的逻辑像素写，不是按图文件尺寸硬套；容器宽高是 20px →
background-size就是20px 20px - 如果用 Less/SCSS Mixin 自动生成规则，
@w/@h参数别设成auto，否则background-size: auto会让 @2x 图被错误拉伸
伪元素和构建路径是最容易漏掉的两个坑
::before / ::after 要显示背景图，必须同时满足三个条件：有 content: ""、display: block（或 inline-block）、显式设置宽高。缺任一，背景无渲染区域，再准的媒体查询也白搭。
构建工具（Vite/Webpack）不会解析 image-set() 或媒体查询里的字符串路径。写 url("icon@2x.png")，就得确保该文件真实输出到 dist 目录且可访问——404 时浏览器不会降级，而是静默 fallback 到 1x 图，你看到的“糊”，其实是根本没加载成功。
- 检查 Network 面板，确认
icon@2x.png返回 200，不是 404 - 文件命名要严格匹配：Mixin 默认拼
@2x，你就不能放icon_2x.png或icon@2x.jpg - SVG 图标不存在“Retina 模糊”问题，但若用
shape-rendering失效
真正起作用的从来不是媒体查询本身，而是它触发后那一行 background-size 是否精准匹配了设计稿的逻辑尺寸——小数像素、未清理的 SVG 内联宽高、构建路径断链，任何一个环节出问题，高清图都会变糊图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
