如何处理CSS sprite（使用背景位置）导致移动设备上图片模糊的问题？

Question

首先，在使用CSS正常图片的时候，我们在设置了 width:50px 而这在桌面和移动设备上都适用OK（当然图像质量和自然尺寸要足够高）。

然而当使用CSS sprite时，用一个简单的技巧与 background-position如果使用同样的尺寸（宽度为50px），显示的图像将是模糊的（由于缩放或类似的东西）。

我知道我们必须提供一个更好的spriteheet图像（当然是大尺寸的）。但是在这种情况下 width:50px 将无法工作，我的意思是它必须是一些更大的值以及。我不知道如何确定这个值。因为就像我一开始说的那样，任何宽度为 50px 将由移动设备以某种方式自动处理。如果我设置一个较大的值，结果图像可能会意外地变大（尽管质量可能是理想的）。

.item {
    background: url(/sprites.png) 0px 0px;
    width: 50px;
    ...
}

如何处理这个问题？

Answer 1

对于关心使用PNG精灵的解决方案的人来说，这正是你可以做的。为了帮助在移动（以及高DPI屏幕）设备上流畅地渲染精灵，我们需要一个更大的图像（大约x2的大小，例如：普通屏幕需要一个宽度为500px的精灵表，你至少需要另一个宽度为1000px的）。

所有的 background-position 和 background-size 在所有设备上都是一样的(手机& 台式电脑)，唯一的区别是在这里的 background-image. 在桌面电脑上，你可以使用普通（小）的spriteheet，而在手机上，你可以使用较大的spriteheet（如上所述）。

以下是应用于桌面电脑和手机的2个CSS代码片段。

这是常见的CSS:

.item {
   background-position: 0px 0px;
   background-size: 500px 300px;
   background-repeat: no-repeat;
}

这适用于台式电脑:

.item {
   background-image: url(your_normal_sprites_500.png);
}

适用于手机:

.item {
   background-image: url(your_large_sprites_1000.png);
}

如果要为desktopmobiles编程切换stylecss，我们可以利用。window.devicePixelRatio. 这在一些老的浏览器上是不支持的，但现在大多数流行的现代浏览器上应该都可以使用。

var isHiResScreen = (window.devicePixelRatio || 1) > 1;
if(isHiResScreen){
   //pick style for mobile
}
else {
   //pick style for desktop pc
}

当然，如果可能的话，你应该考虑使用SVG spritesheet来代替，就像@Dejan.S在他的评论中提到的那样（当然，我也是由于他才知道的）。这是很有前途的:)