retina屏下css模糊主因是浏览器对亚像素坐标或低分辨率图插值渲染，需分两类修复：fixed/absolute元素须用整数坐标或flex居中；background-image需image-set()配显式background-size及真实翻倍图源；img标签须用x描述符srcset并搭配sizes。
Retina 屏幕下 CSS 模糊不是“CSS 写错了”，而是浏览器在高 DPR（如 2x/3x）下对亚像素坐标或低分辨率位图做了插值渲染——问题分两类：一类是 transform 或 position 导致的元素边缘/文字虚化，另一类是 background-image 或 <img> 加载了错误分辨率的图。修复必须按根源拆解，不能靠 translateZ(0) 碰运气。
fixed/absolute 元素模糊：别信 translateZ(0)，要整数坐标
常见错误现象：弹窗、tooltip、导航栏用 position: fixed + transform: translate(-50%, -50%) 居中，在 iPhone 上文字发虚、边框毛边。
-
transform: translate(-50%, -50%)在父宽为奇数（如 769px）时算出 -384.5px，DPR=2 下就是 1 物理像素偏移，GPU 必须插值 -
translateZ(0)不解决根源，只可能偶然让光栅化落点更整，还可能增加内存开销 - 正确做法是强制取整：
element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - 纯 CSS 场景优先用
calc()替代百分比：transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) - 居中场景直接换布局：父容器
display: flex; justify-content: center; align-items: center;，子元素去掉position: fixed和transform
background-image 模糊：image-set() 不是粘贴即用
常见错误现象：DevTools 里 background-image: image-set(...) 被整行划掉，控制台报 Invalid property value，实际加载的仍是 @1x.png。
-
image-set()只对background-image生效，Firefox 至今不解析其内容，IE 全系不支持 - 必须写 fallback：
background-image: url("icon.png"); background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);（顺序不能反） -
background-size必须显式设为设计稿逻辑尺寸，比如图标设计稿是 24×24px，就得写background-size: 24px 24px；否则@2x.png（48×48px）会按原始尺寸渲染，视觉放大一倍 - 构建产物里必须真实存在
icon@2x.png，Vite/Webpack 默认不处理image-set()中的路径字符串，404 后不会降级到 fallback 的url() - 安卓 WebView 需前缀：
background-image: -webkit-image-set(url("icon.png") 1x, url("icon@2x.png") 2x);
![]()
标签模糊：srcset 必须用 x 描述符，不是 w
常见错误现象：iPhone 上图片发虚，但检查 <img> 元素发现 src 加载的是 a@1x.jpg，而非 a@2x.jpg。
-
srcset="a-400.png 400w, a-800.png 800w"对 DPR 切换无效——w描述符响应视口宽度，不响应设备像素比 - 必须用
x描述符：srcset="a@1x.jpg 1x, a@2x.jpg 2x, a@3x.jpg 3x" -
src是兜底项，IE 全系只认它，不能省 - 搭配
sizes才能真正生效：sizes="(max-width: 768px) 100vw, 50vw"告诉浏览器“这张图在不同断点下占多少 CSS 像素”，浏览器才能结合 DPR 算出该加载哪张物理尺寸的图 - 构建工具不自动处理
@2x文件路径，需手动验证a@2x.jpg确实输出到了dist目录且可访问
最容易被忽略的点：所有方案都依赖“图片物理尺寸真实翻倍”——@2x 图必须是 @1x 图宽高的 2 倍（如 24px → 48px），不是用 PS 放大出来的“假高清”。一旦尺寸错配，再严谨的 CSS 写法也救不回模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
