CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)

我去，这个标题好长，想了半天还是这么个大长标题。其实本文的内容简单来说就是在 Retina 屏幕下，一般的图片会显得不清晰，所以我们就要 2X 的图片来缩放到 50%（因为物理分辨率不会变）来保证清晰度。后来出现的字体图标解决了 2X 放大的问题，但是一些复杂的图片还是无法用字体图标代替，于是我们又回到了 2X 图片的问题。2X 图片多了之后又会影响加载速度，在普通图片的时候我们可以用 CSS Sprites 比较完美的解决，但一张图片放好几个 2X 图片定位坐标的时候又会有一个缩放的问题，本文的重点就是解决这个问题。

实例图片

首先来看一下例子图片：

这里要说明图片的背景是透明的，白色是我为了方便大家识别填充进去的~

图片为八个大小完全一样的 2X 图片无缝的拼进去的。

缩放尺寸

这里就是本文的关键所在了，图片是需要进行缩放才能放进去的，原来单一的图片的时候我们直接用 CSS 的 background-size:50% 即可，但现在却不管用了，因为现在的 50% 实际是下图的样子：

那该怎么办呢？很简单。

首先，如果你的图标尺寸不一请把每个图标的空间都按最大的那个摆好，然后把原始图标放在左上角：

并且必须确保每个图片的空间都是正方形（注意是空间，不是图片具体大小），然后记住每个空间的边长。

把 CSS 的 background-size 调整成 X00%，其中 X 为图标数量较多的一列的图标数量。

列如上边的演示，每横排有四个图标，每竖排有两个图标，取较多的横排，所以 X 为4，background-size 即为 400%

调用尺寸

缩放完毕就该调用了。列如调用上图的第一行第二列的 “分类黑色” 图标，它在上图的尺寸为 102px，但我想让他显示的物理分辨率为 44px，那好，首先弄一个标签，长宽为 44px，坐标（background-position）即为 44px（X 轴）和 0（Y 轴）。

这样就很完美的显示出来了，解决了 Retina 下雪碧图（CSS Sprites）的小尴尬。