移动端图片模糊的根本原因是图源、缩放逻辑与设备像素比（DPR）未对齐，必须同时满足换高倍图、复合媒体查询、显式匹配设计稿的background-size三者，缺一不可。
移动端图片模糊不是 CSS 写得不够“高级”，而是图源、缩放逻辑、设备像素比（DPR）三者没对齐。单靠 background-size 或 image-rendering 无法根治，必须分层解决。
为什么 background-size: cover 还是糊
因为 cover 只控制缩放行为，不改变图源分辨率。1x 图在 iPhone 14（DPR=3）上被拉伸 3 倍渲染，浏览器用插值算法填充物理像素，结果必然发虚、毛边、文字边缘糊成一片。
- 开发时 Chrome 模拟器看着清楚，真机 Safari 一打开就糊 —— 模拟器默认 DPR=1 或未真实模拟插值过程
-
background-size: 750px auto有效，但前提是这张图是 @2x 或 @3x 切图，否则只是“用力拉伸低清图” - 不要用
background-size: 100% 100%处理普通位图，这是强制非等比拉伸，失真更严重
必须同时满足的三个条件
换高倍图 + 正确媒体查询 + 显式 background-size，三者缺一不可。
- 图源命名严格对应：
bg.jpg/bg@2x.jpg/bg@3x.jpg，路径、大小写、扩展名完全一致 - 媒体查询必须复合书写：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)，只写其一会漏掉 iOS 9–12 或新版 Chrome -
background-size必须显式声明，且取值匹配设计稿原始宽高（如 750px 宽的设计稿，就写background-size: 750px auto）
image-set() 的实际兼容性陷阱
image-set() 看似简洁，但 Firefox 至今（v128）完全不支持，安卓 WebView 多数只认 -webkit-image-set()，且要求路径绝对、单位必须带 x 后缀。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
url("icon@2x.png") 2（缺单位）、url(icon@2x.png)（没引号）、2xpx（单位错） - 可靠兜底顺序必须是：
background-image: url("icon@1x.png");→background-image: -webkit-image-set(...);→background-image: image-set(...); -
-webkit-版本必须写在前面，否则 Safari 16.4+ 可能跳过整条声明
部署和构建环节常被忽略的细节
代码写对了，但上线后仍糊，问题大概率卡在构建或服务器环节。
- Vite/Webpack 默认可能过滤带
@的文件名（误判为 PostCSS 插件语法），需检查静态资源是否真的被输出 - Nginx/Apache 一般允许
@符号，但某些 CDN（如部分阿里云/腾讯云配置）会拦截，导致bg@2x.jpg404 - Network 面板里看是否真的加载了
@2x图 —— 如果始终是@1x，image-rendering再强也救不回原始分辨率
真正起效的点永远在图源加载那一刻：DPR 匹配、路径可达、尺寸准确、background-size 不留空。其余都是锦上添花，不是雪中送炭。
