根本原因是未设background-size：浏览器将icon@2x.png（如48×48px）按原始尺寸渲染，而容器仅24×24px，导致放大插值发虚；必须显式设background-size: 24px 24px对齐设计稿逻辑尺寸，否则高清图无效。
为什么只换@2x图但图标还是糊
根本原因不是图没换，而是浏览器把 icon@2x.png（比如 48×48px）当 48×48 CSS 像素渲染，而容器实际只有 24×24px —— 结果图被放大一倍显示，插值拉伸导致边缘发虚。高清资源必须配对逻辑尺寸，否则等于白准备。
关键动作是显式写 background-size：
- 如果设计稿中图标逻辑尺寸是
24px 24px，那无论用icon.png还是icon@2x.png，background-size都得是24px 24px - 别用
background-size: cover或100% 100%，它们在不同 DPR 下缩放比例不一致，容易裁掉关键区域 - 伪元素（如
::before）里用背景图时，必须同时有content: ""、display: block和显式width/height，否则无渲染区域，背景压根不出现
媒体查询该用 min-resolution: 2dppx 还是 -webkit-min-device-pixel-ratio
必须两者都用，但不能写成 @media (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2) —— 这样要求两个条件同时成立，旧版 iOS Safari（≤ iOS 12）根本不支持 min-resolution，结果整条规则失效。
正确写法是逗号分隔的“或”逻辑：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
注意点：
-
-webkit-min-device-pixel-ratio: 2写整数 2 就行，别写2.0，部分旧 Safari 会拒识 -
min-resolution: 2dppx是首选，它不依赖系统 DPI 设置或缩放比例，语义准确且兼容 Chrome 29+、Firefox 16+、Safari 8+、Edge 12+ - 绝对别混用
192dpi：Windows 高缩放（如 125%）下常不触发，且和2dppx并列写成(min-resolution: 2dppx), (min-resolution: 192dpi)可能导致非 Retina 设备误命中
image-set() 看似简洁，但哪几个地方一错就全失效
image-set() 不是粘贴即用的语法糖，它对格式、顺序、路径、尺寸都极其敏感。Safari 6.1+/Chrome 21+/Edge 12+ 支持，Firefox 完全不解析内容，只走 fallback；IE 全系无视。
常见失效点：
- fallback 必须写在前面：
background-image: url("icon.png"); background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);—— 顺序反了，后者不会覆盖前者 - 路径必须加引号，尤其含
@符号时："icon@2x.png"✅，icon@2x.png❌ - 不支持
w描述符，混写"icon.png" 800w会导致整个image-set()静默失效 -
icon@2x.png文件物理尺寸必须严格是icon.png的 2 倍（如 24×24 → 48×48），不能靠 PS 放大“假装”高清；否则位图没多出像素信息，再怎么选图也糊 - 构建工具（Vite/Webpack）默认不处理
image-set()里的路径，"@2x.png"很可能被过滤或未输出到 dist 目录，需手动验证可访问性
SVG 图标要不要适配 Retina
SVG 图标完全不用适配 —— 它是矢量格式，缩放由渲染引擎实时重绘，没有像素丢失问题。同一份 icon.svg 在 DPR=1、2、3 的设备上都锐利清晰。
但要注意陷阱：
- 别在 SVG 里嵌位图（如
<image href="photo.jpg"></image>），这部分仍会模糊 - 别给 SVG 图标硬设
width/height为固定像素值（如width: 24px），这会限制其响应能力；推荐用viewBox+ 自然宽高比，或用 CSS 控制最大尺寸 - 如果项目里混用 SVG 和 PNG 图标，你会发现 PNG 总是偏软——这不是 CSS 问题，是位图本质决定的，优先迁移到 SVG 是最省心的长期方案
24px 是设计稿里的 CSS 像素值，不是图片文件名里的 @2x，也不是屏幕报告的 window.devicePixelRatio —— 调试时先确认这个基准值是否对齐，再查图、查媒体查询、查 background-size，否则越调越乱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
