应使用 min-resolution: 2dppx 或 -webkit-min-device-pixel-ratio: 2 媒体查询加载@2x图，必须带 min- 前缀和比较符；background-image 替换时需配合 background-size 设为逻辑像素尺寸，否则会拉伸模糊。
怎么用媒体查询区分高分屏加载@2x图片
直接上判断逻辑：用 min-resolution: 2dppx 或等价的 min--webkit-min-device-pixel-ratio: 2，别只写 device-pixel-ratio: 2——这个没 min 前缀是无效的。
常见错误是把 @media (device-pixel-ratio: 2) 当成条件，实际浏览器根本不认，会直接跳过整段样式。必须带比较操作符（min- 或 max-）。
-
min-resolution: 2dppx是标准写法，Chrome/Firefox/Safari（14.5+）都支持 -
min--webkit-min-device-pixel-ratio: 2是 Safari 旧版本兜底，iOS 13.7 及更早必须靠它 - 不要混用
dppx和x单位（比如2x），2x在媒体查询里非法，仅用于srcset
background-image 怎么切@2x图不模糊
关键不是“换图”，而是让高分屏用更高密度的图源，同时保持 CSS 布局尺寸不变——否则就算图清晰，缩放后还是糊。
典型写法是先定义普通图，再用媒体查询覆盖：
div.logo {
width: 100px;
height: 40px;
background-image: url(logo.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
div.logo {
background-image: url(logo@2x.png);
background-size: 100px 40px; /* 必须设，否则@2x图会拉伸显示 */
}
}
-
background-size要显式写成逻辑像素尺寸（即设计稿尺寸），不能依赖默认的auto - 如果图是 SVG，不用
@2x，直接用background-size: contain+ 原生矢量缩放 - 慎用
image-set()：Firefox 目前不支持，Safari 对url()内嵌路径解析有 bug，生产环境建议暂弃
img 标签用srcset比媒体查询更稳
对普通 <img>，优先用 srcset + sizes，浏览器自己选最合适的图，兼容性、性能、维护性都比 CSS 媒体查询好得多。
错误示范：<img src="icon.png" srcset="icon@2x.png 2x"> —— 没写 sizes，浏览器不知道你这张图在页面里占多大，可能在高分屏下仍选错分辨率。
- 必须配
sizes，例如：sizes="(max-width: 768px) 100vw, 300px" -
srcset中的2x是设备像素比标识，不是文件名约定；icon@2x.png这个名字只是方便人看，浏览器不关心 - Webpack/Vite 构建时若用
url-loader或image-minimizer-webpack-plugin，注意它们默认不生成@2x版本，得手动配置多倍图输出
为什么有时换了@2x还是糊
大概率不是图的问题，是渲染层被强制降采样了——尤其出现在用 transform: scale()、zoom 或父容器设了 will-change: transform 的场景。
- CSS 缩放会触发亚像素渲染，高分屏下容易模糊；改用
width/height控制尺寸更可靠 - Chrome 115+ 对
backface-visibility: hidden的处理变了，某些情况下会干扰device-pixel-ratio检测，可临时去掉试试 - 如果图本身是 PNG-8 或带硬边锯齿，放大后依然明显；
@2x只解决采样不足，不修复原始质量
高分屏适配真正的麻烦点不在怎么加 @2x，而在整个渲染链路里任何一环用了非整数像素、隐式缩放或混合了位图与矢量——这些地方没日志、不报错，但糊得非常稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
