如何为Retina/非Retina设备编写无覆盖的背景图媒体查询？

我完全懂你这种不想用覆盖式写法、想通过明确区间划分精准控制样式的思路——毕竟谁也不想让不必要的背景图加载，或是出现样式意外覆盖的情况！

你平时针对屏幕尺寸的写法非常稳妥，通过max和min的区间划分，确保每个设备只会匹配到一个规则，完全避免了样式覆盖的风险：

// 推荐的区间式写法（无覆盖风险）
@media (max-width: 767px) {
  background-image: url('mobile-bg.jpg');
}
@media (min-width: 768px) {
  background-image: url('desktop-bg.jpg');
}

// 要避免的覆盖式写法（存在 fallback 样式被意外继承的可能）
// background-image: url('fallback-bg.jpg');
// @media (min-width: 768px) {
//   background-image: url('desktop-bg.jpg');
// }

针对Retina设备的像素比（DPR）和分辨率查询，其实不需要像屏幕宽度那样做“减1像素”的处理，直接用清晰的区间划分就能完美沿用你的模式，且不会出现断点重叠问题。

基础版：区分非Retina和Retina设备 #

// 非Retina设备（DPR < 2）
@media (-webkit-max-device-pixel-ratio: 1.99), (max-resolution: 1.99dppx) {
  background-image: url('normal-bg.jpg');
}

// Retina及以上设备（DPR ≥ 2）
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  background-image: url('retina-bg@2x.jpg');
}

进阶版：区分多档DPR设备（比如2x/3x） #

如果需要覆盖更高像素密度的设备（如3x的iPhone），同样可以用区间逻辑精准划分：

// 非Retina（DPR < 2）
@media (-webkit-max-device-pixel-ratio: 1.99), (max-resolution: 1.99dppx) {
  background-image: url('normal-bg.jpg');
}

// 2x Retina（2 ≤ DPR < 3）
@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.99),
       (min-resolution: 2dppx) and (max-resolution: 2.99dppx) {
  background-image: url('retina-bg@2x.jpg');
}

// 3x及以上（DPR ≥ 3）
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  background-image: url('retina-bg@3x.jpg');
}

这和屏幕宽度的逻辑不同：

• 屏幕宽度是用户可调整的，且部分设备宽度刚好卡在断点数值上（比如768px），所以需要用max:767px和min:768px来避免同时匹配。
• 而设备像素比（DPR）和分辨率是硬件固有属性，极少有设备会出现1.99这种非标准中间值；同时浏览器的媒体查询匹配逻辑是精确的——max-device-pixel-ratio:1.99只会命中DPR≤1.99的设备，min-device-pixel-ratio:2只会命中DPR≥2的设备，两者没有重叠的可能。

用1.99而非1作为上限，只是为了兼容极少数DPR在1~2之间的老设备，确保样式覆盖更全面。

内容的提问来源于stack exchange，提问作者Cameron