必须用逗号分隔的复合媒体查询（-webkit-min-device-pixel-ratio与min-resolution并存），默认1x图前置作fallback，配合显式background-size和network验证，三者缺一不可。
根本不是图本身质量差，而是1x位图被强行拉伸插值渲染——高DPR设备没加载对应@2x/@3x资源，或CSS没控制好缩放逻辑。
为什么只写 min-resolution: 2dppx 不够
这个媒体查询在 iOS 9–12 的 Safari 中完全不生效；而只写 (-webkit-min-device-pixel-ratio: 2) 又会在新版 Chrome/Firefox 中失效。必须用逗号分隔的复合条件，且默认图必须放在最前面作为 fallback：
-
.banner { background-image: url("bg.jpg"); }—— 这行不能删、不能加!important、不能被其他规则覆盖 - 再叠加：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .banner { background-image: url("bg@2x.jpg"); } } - 对 iPhone Pro 等 3x 屏单独补一句：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { ... }
background-size 设错会直接放大模糊
用 100% 100% 拉伸位图等于主动触发插值，尤其在高分屏上效果灾难。正确做法取决于用途：
- 全屏背景：用
background-size: cover;，等比缩放填满，裁边不拉伸 - 图标类小图：用
background-size: contain;或显式像素值（如750px auto），避免浏览器猜尺寸 - 绝对禁止
100% 100%用于非矢量图，它把 1x 图硬撑到容器宽高，失真无法挽回
上线前最容易漏掉的三个验证点
即使代码全对，部署后仍可能模糊，因为构建/CDN/网络层悄悄干预了资源：
- 打开 Network 面板，确认
bg@2x.jpg返回的是200，不是404或被 CDN 重写成bg.jpg - 某些 Nginx 配置或静态托管服务（如 Vercel）默认允许
@符号，但部分企业 CDN 会过滤含@的路径，需手动放开 - 检查 DevTools → Elements → Styles 面板里
background-image是否被划掉；若被覆盖，往上追!important或更高级选择器
真正卡住人的往往不是写法，而是 @2x 文件名被 CDN 拦截、cover 在 flex 容器中失效、或者忘了给 background-position: center 导致关键内容被裁掉——这些细节不验证，光调 CSS 就是白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
