（本篇只介绍PNG图像问题，当然还可以用SVG来替代，后面会介绍SVG的用法。）
假设我有一个Sprite图像如下图（单个ICON尺寸为26px * 26px,这里为了演示方便，只放2个ICON）

在PC上使用如下CSS，ICON显示正常，没有出现模糊现象

.icon{
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/icon.png) no-repeat
}
.icon-one{
    background-position: 0 0;
}
.icon-two{
    background-position: 0 -26px;
}
.icon-three{
    background-position: 0 -52px;
}

但是在IPAD上ICON就会变模糊。
对于Retina屏幕显示，我们必须声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器。我们同时改变背景大小而不是宽度和高度。这里可以用CSS的background-size属性来设置。
这里有一个公式
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值

例如：上面的ICON的尺寸为26px * 26px
那么Retina屏幕下我们需要的尺寸就为52px * 52px，即放大两倍。

套用上面的公式：
高分辨率图像宽度（52px） / 目标图像宽度(26px) = 2
原始Sprites图像宽度(icon.png图片总宽度为78px) / 2 = background-size的宽度值(39px).

最后的一件事情。我们只计算了背景图像的宽度值，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。当然你也可以设置相应的值（设置background-size的宽度为auto，高度为具体值），但我发现设置宽度会比较容易。

完整的CSS代码

.icon {
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/icon.png) no-repeat
}
.icon-one {
    background-position: 0 0;
}
.icon-two {
    background-position: 0 -26px;
}

/* 移动端ICON处理 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max-moz-device-pixel-ratio: 2) {
    .icon {
        display: block;
        width: 26px;
        height: 26px;
        background: url(../img/icon@2x.png) no-repeat;
        background-size: 39px auto;
    }
    /* 注意：这里的background-position还是跟上面一样，不用设置 */
}