前端小伙伴们在开发网站时，经常发现一个古怪的难题：自己精心打磨出的精美小图标，在普通的家用电脑上看起来非常精致，但是在高档的苹果笔记本 (MacBook) 或新款手机上浏览时，却会无一例外地变得模糊一圈，就像是隔了一层毛玻璃，非常影响细节美感。

“糊”的物理祸首：设备像素比 (Device Pixel Ratio, DPR)

在早年的电脑屏幕上，1个 CSS 像素（虚拟像素）在物理芯片上就对应 1个 发光的物理小点（DPR = 1.0）。 但是，自从“视网膜高清视场屏 (Retina Displays)”面世后，为了在不改变界面元件大小的情况下能展现更精细的文本，硬件厂商在同样大的面积里横竖塞进了多达双倍甚至三倍数量的物理液晶格：

  • 苹果 Retina 屏：DPR 默认等于 2.0
  • 高档智能手机：DPR 往往达到 3.0

这就意味着，当你在 CSS 布局里写下一个 width: 100px; height: 100px 的盒子时，手机屏幕其实是拿了 $200 \times 200$ 颗真实的物理发光点去凑出这幅图案。 如果你此时投喂给它的图片文件物理上真的只有 $100 \times 100$ 像素，屏幕就只能通过色彩插值算法硬行生拉拽，强行铺满这四倍像素格子，导致画面边缘直接变糊。

行业经典战术：两倍图规则 (2x Export)

为了能在 Retina 屏幕上达到纤毫毕现的极致体验，我们在切纯位图时，物理尺寸通常要导出为 CSS 设定宽高的双倍：

  • CSS 目标展示宽宽: 100px
  • 位图文件物理高宽: `200px`

当然，另外一个万无一失的核心秘绝：对于标志、线条和符号图标等，坚决、无条件地使用 SVG 矢量格式代替 PNG。由于 SVG 靠数学线条渲染，所以在 2x、3x 的 DPR 屏幕下，它会自动画图，一辈子都绝不会出现变糊的情况。