高 DPR 屏背景图模糊的根本原因是图源分辨率未匹配设备像素比，需同时满足三条件：提供@2x/@3x多倍图、用复合媒体查询（如@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx)）、显式设置background-size具体值。
背景图在高 DPR 屏上模糊，不是因为 background-size 没写对，而是图源分辨率没跟上设备像素比。只换图、只写媒体查询、只设尺寸——三者缺一不可。
为什么 background-image 写了 cover 还是糊
因为 cover 只控制缩放行为，不改变图源物理分辨率。1x 图在 DPR=3 的 iPhone 上会被浏览器强行拉伸 3 倍渲染，插值填充导致毛边和文字虚化。哪怕你写了 background-size: 750px auto，只要图还是 bg.jpg，照样糊。
常见错误现象：
- Chrome 模拟器里清楚，真机 Safari 一打开就糊
- 改了图但页面没变——其实是缓存没刷新
- 写了
@media (min-resolution: 2dppx)，但 iOS 9–12 的 Safari 完全不响应
必须同时满足的三个条件
缺任何一个，高 DPR 屏都会模糊：
- 提供严格命名的多倍图：
bg.jpg/bg@2x.jpg/bg@3x.jpg（大小写、扩展名、@符号必须完全一致） - 用复合媒体查询命中主流浏览器：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)；@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)（顺序不能颠倒，1x 规则必须写在最前） -
background-size必须显式写具体值，比如设计稿宽 750px 就写background-size: 750px auto；不要依赖继承，每个媒体查询里都得重设
路径和缓存是最容易踩的坑
写了正确的媒体查询，图还是模糊？大概率卡在这两处：
-
url()路径必须相对 CSS 文件位置，不是 HTML 页面。例如 CSS 在/css/main.css，图就得写url(../img/bg@2x.jpg)，不能写url(/img/bg@2x.jpg) - 开发阶段务必加版本参数：
url('./img/bg@2x.jpg?v=20261014')，否则改图后浏览器仍用缓存的旧文件 - 检查 Network 面板：如果
bg@2x.jpg返回304，说明缓存生效，不是 DPR 检测失败
别指望浏览器自动省流量
即使你只在 @media (min-resolution: 2dppx) 里写了 background-image，Chrome 和 Safari 仍可能在 DPR=1 的手机上也下载 bg@2x.jpg。这不是 bug，是规范行为——浏览器会预加载所有出现在 CSS 中的 url()，不管当前是否匹配媒体查询。
真正可控的方式是 JS 动态加载对应 DPR 的 CSS 文件，或者把不同 DPR 的规则拆到独立 CSS 中，用 <link rel="stylesheet" media="..."> 控制加载时机。单纯靠媒体查询做资源调度，本质上不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
