可行但需校验devicepixelratio，因@media(-webkit-min-device-pixel-ratio:2)在部分安卓机或chrome模拟器中误判，而devicepixelratio可读精确值如2.8、3.0。
直接结论：用 @media 手动写媒体查询配 @2x 图是可行的，但必须配合 window.devicePixelRatio 的实际值校验，否则在部分安卓机或 Chrome 模拟器里会误判——@media (-webkit-min-device-pixel-ratio: 2) 不等于 devicePixelRatio >= 2。
为什么不能只靠 @media (-webkit-min-device-pixel-ratio: 2)
这个媒体查询在 iOS Safari 和旧版 Android 浏览器中基本可靠，但在桌面 Chrome（尤其开启“设备模拟”时）、某些华为/小米定制系统上，min-device-pixel-ratio 可能返回 1 或不触发，即使 devicePixelRatio === 3。Retina.js 内部也弃用了纯 CSS 媒体查询做主判断，改用 JS 实时读取 window.devicePixelRatio。
- 真实设备上，
devicePixelRatio是 JS 运行时可读的精确值（如2.8、3.0） -
@media查询只支持整数比（2、3），且依赖 UA 和渲染引擎实现 - 若仅靠
@media，@3x图在devicePixelRatio === 2.75的设备上可能被跳过
.bg-image() Less 混合宏里怎么安全写 @2x 回退逻辑
不要把 @2x 当成“默认图”，而应视为“最低高清档”。典型写法是：先设普通图，再用媒体查询覆盖为 @2x，最后用 JS 注入的 data-dpr 属性兜底处理中间值（如 2.3）。
- 基础图用
@1x路径：background-image: url('@{url}.@{ext}'); -
@media覆盖@2x：@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { background-image: url('@{url}@2x.@{ext}'); } - JS 在
上写data-dpr="2"或data-dpr="3"，Less 编译后生成对应选择器：[data-dpr="2"] .bg-img { background-image: url('...@2x.png'); } - 这样三重保障：CSS 媒体查询 + HTML 属性 + JS 实时判定
路径拼接时容易漏掉的 @ 符号和扩展名顺序
Less 里字符串拼接对符号极其敏感。写 @{url}@2x.@{ext} 是对的，但下面这些都会出错：
-
@{url}@2x@{ext}→ 生成icon@2xpng（缺点） -
@{url}@2x.@{ext}.→ 多一个点，变成icon@2x.png. -
url('@{url}@2x.@{ext}')里用了单引号但@{url}本身含空格或特殊字符 → 编译失败 - 路径含中文或
%时没做encodeURI处理 → 加载 404
稳妥做法是：所有图片路径统一用小写字母+短横线，扩展名显式传入，例如调用 .bg-image('assets/img/logo', 'png')。
兼容性差的安卓机上，@3x 图建议慎用
多数安卓中高端机的 devicePixelRatio 是 2.625、2.75 这类非整数，但它们物理像素密度其实达不到真正 @3x 图所需的清晰度。强行加载 @3x 图只会浪费流量，且缩放后未必更锐利。
- 除非明确针对 iPhone 14 Pro / iPad Pro 等真
3x设备，否则@2x是性价比最高的档位 - 若必须支持
@3x，媒体查询要写全：@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) - 注意 Less 中嵌套媒体查询时，
@3x规则必须放在@2x之后，否则会被覆盖
真正难处理的是那些 devicePixelRatio === 2.5 却又不触发 min-device-pixel-ratio: 3 的设备——这时候得靠 JS 动态 require 或 fetch 判断图片是否存在，Less 静态编译做不到。
