根本原因是图源未匹配设备像素比（dpr），须同时使用@2x/@3x图、复合媒体查询（-webkit-min-device-pixel-ratio与min-resolution并存）及显式background-size（如750px auto），三者缺一不可。
因为图源分辨率没匹配设备像素比（DPR），浏览器被迫对1x图做插值拉伸——这不是background-size写得不对，是根本没换对图。
为什么 background-size: cover 还是糊
cover只控制缩放逻辑，不改变图源物理像素数量。iPhone 14（DPR=3）上，一张100×100px的@1x.png会被拉伸成300×300物理像素渲染，插值算法填充中间像素，结果就是毛边、发虚、文字边缘糊成一片。
- 开发时Chrome模拟器看着清楚，真机Safari一打开就糊：模拟器DPR常固定为2，真机DPR随机型跳变（iPhone 15 Pro Max是3，部分安卓是2.75）
- 即使写了
background-size: 750px auto，只要图还是bg.jpg，照样糊 -
background-size: 100% 100%在非矢量图上等于主动失真，慎用
image-set() 为什么没生效
不是写法错，是浏览器压根没识别。Firefox至今（v128）完全不支持image-set()；安卓WebView多数只认-webkit-image-set()，且要求路径绝对、单位必须是dppx或带x后缀。
- DevTools里
background-image: image-set(...)被整行划掉 → 浏览器不支持，直接跳过整条声明 - Console报
Failed to parse value for 'background-image'→ 单位写错，比如用了2而不是2x - 只看到
@1x.png，@2x.png根本没发请求 →-webkit-版本没写在最前面，Safari 16.4+可能跳过整条规则
media query 必须同时写两套条件
只靠@media (min-resolution: 2dppx)会漏掉iOS 9–12的Safari；只写@media (-webkit-min-device-pixel-ratio: 2)在新版Chrome/Firefox/Edge中可能失效。
- 必须用逗号分隔的复合条件：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 1x规则必须放在最前面作为fallback，否则某些旧浏览器会直接忽略后续所有media query
- 换了
@2x.jpg但没同步写background-size: 750px auto→ 高分辨率图仍被二次缩放，锐度反而下降
构建和部署环节最容易卡住
写了media query、准备了@2x图，上线后还是糊——问题常出在工具链或服务器配置上。
- Vite/webpack默认过滤带
@的文件名（误判为PostCSS语法），需在vite.config.js里配assetsInclude - 某些CDN或Nginx配置禁止
@符号，导致icon@2x.png返回404 - 路径层级、扩展名必须完全一致，仅后缀不同；引号类型（单/双）三行声明必须统一
真正复杂的点在于：DPR是运行时变量，而CSS媒体查询和image-set()都是静态解析。如果你要动态切换主题+适配DPR+Canvas重绘，光靠CSS兜底不够，必须JS介入读取window.devicePixelRatio并重设缓冲区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
