推荐使用标准 min-resolution: 2dppx（等价于 192dpi）判断高 dpi 设备，因其是 w3c 标准、语义清晰、兼容现代浏览器；旧式 -webkit-min-device-pixel-ratio: 2 仅限 webkit/blink 且已逐步弃用。
如何用 @media 查询 device-pixel-ratio
直接用 @media (-webkit-min-device-pixel-ratio: 2) 或 @media (min-resolution: 192dpi) 就能判断高 DPI 设备，但必须注意写法差异和浏览器兼容性。
现代写法推荐用 resolution 媒体特性，它标准化且支持单位（dpi / dppx），而旧式 -webkit-min-device-pixel-ratio 仅限 WebKit/Blink 内核，且值是无量纲比值（如 2 表示 2x）。
-
min-resolution: 2dppx等价于min-resolution: 192dpi（因为 1dppx = 96dpi） - 不要混用
device-pixel-ratio和resolution—— 前者不是标准语法，Safari 16.4+ 已弃用-webkit-device-pixel-ratio的非前缀形式 - IE 完全不支持
resolution，如需兼容 IE，只能退回到@media screen and (-webkit-min-device-pixel-ratio: 2)+ JS 回退
为什么 min-resolution: 2dppx 比 min-device-pixel-ratio: 2 更可靠
min-device-pixel-ratio 是非标准属性，未被 CSS Media Queries Level 4 规范收录，Chrome 111+、Firefox 119+ 已明确不支持无前缀版本；而 resolution 是 W3C 标准，语义清晰，单位可读性强。
-
2dppx明确表示“每 CSS 像素对应至少 2 物理像素”，和设计稿缩放逻辑一致 -
device-pixel-ratio: 2在部分安卓 WebView 中行为不一致（比如横竖屏切换后未重触发） - 使用
dppx单位时，无需记忆 96 的换算基数 ——1dppx == 1x，2dppx == 2x，直觉匹配设计师常说的 @2x/@3x
实际应用：为高 DPI 屏幕加载更高清图片
最常见需求是条件加载 @2x 图片，但纯 CSS 无法切换 src，所以通常配合 image-set() 或 HTML 的 srcset，而 @media 用来控制样式适配（如背景图、尺寸微调）。
body {
background-image: url(icon.png);
}
@media (min-resolution: 2dppx) {
body {
background-image: url(icon@2x.png);
background-size: contain;
}
}
- 若用
<img>，优先用srcset：<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x"> - CSS 中用
image-set()更简洁，但 Safari 16.4+ 才完全支持：background-image: image-set("icon.png" 1x, "icon@2x.png" 2x); - 别在
@media里重复定义整个样式块 —— 只覆盖必要属性（如background-image、font-size微调），避免冗余
容易被忽略的坑：DPR 值不等于缩放比例，也不稳定
设备像素比（DPR）由系统 UI 缩放、浏览器缩放、OS 设置共同影响，同一台 MacBook 在「默认」和「更大字体」显示模式下 DPR 可能从 2 变成 3；Windows 上 Chrome 缩放到 125% 时，resolution 会反映为 120dpi（≈1.25dppx），而非整数倍。
- 不要假设 DPR 只有 1/2/3 —— 实测 iPad Pro（M1）在某些缩放设置下返回
2.8 - 避免写死
@media (min-resolution: 3dppx)做关键布局分支，应配合prefers-reduced-motion或 JS 动态检测做兜底 - 开发调试时，在 Chrome DevTools 的 Rendering 面板勾选 “Emulate CSS media features”，手动输入
resolution值，比依赖设备更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
