最可靠方案是@media (min-resolution: 2dppx)切换背景图，语义清晰且匹配@2x；推荐image-set()一行声明多倍图，现代浏览器支持良好，兼容旧版需回退媒体查询并注意路径、格式与尺寸设置。
直接用 @media (min-resolution: 2dppx) 切换背景图最可靠，它明确表示“每 CSS 像素至少对应 2 个物理像素”，语义清晰、标准兼容，且和设计师常说的 @2x 完全匹配。
用标准 resolution 媒体特性切换背景图
现代浏览器（Chrome 93+、Firefox 103+、Safari 16.4+）都支持 resolution，推荐写法：
-
min-resolution: 2dppx→ 等价于min-resolution: 192dpi（因 1dppx = 96dpi） - 不要用
min-device-pixel-ratio: 2：它不是标准语法，Chrome 111+ 和 Firefox 119+ 已移除无前缀支持
body {
background-image: url("bg.png");
background-size: cover;
background-repeat: no-repeat;
}
@media (min-resolution: 2dppx) {
body {
background-image: url("bg@2x.png");
}
}
更简洁的方案：优先用 image-set()
一行代码声明多倍图，无需媒体查询，且自动匹配设备 DPR：
body {
background-image: -webkit-image-set(
url("bg.png") 1x,
url("bg@2x.png") 2x
);
background-image: image-set(
url("bg.png") 1x,
url("bg@2x.png") 2x
);
background-size: cover;
}
⚠️ 注意：image-set() 在 Safari 15.4+、Chrome 93+、Firefox 103+ 支持良好；如需兼容旧版 Safari 或 IE，仍需回退到 @media + background-image。
兼容老浏览器的写法（含多前缀）
若项目需支持较老版本（如 Safari
@media
(-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
body {
background-image: url("bg@2x.png");
}
}
实际使用时的关键细节
- 只覆盖
background-image即可，不要重复定义整个样式块，避免冗余 -
@2x图必须真实存在，构建工具（如 Vite/Webpack）不会自动补后缀，需配插件或手动管理路径 - 高清图文件体积更大，建议配合 WebP 格式 + 懒加载，兼顾画质与性能
- 若背景图用于全屏场景，记得同时设
background-size: cover和background-position: center，防止拉伸或偏移
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
