如何处理 CSS sprite（使用 background-position）导致移动设备图像模糊的问题？

Question

首先，当使用 CSS 和普通图像时，我们设置 width:50px 并且这适用于桌面和移动设备（当然图像质量和自然尺寸足够高）。

然而，当使用 CSS sprite 和 background-position 的简单技巧时，具有相同的大小（宽度为 50px），显示的图像将变得模糊（由于缩放或类似的原因） .

我知道我们必须提供更好的 spritesheet 图像（当然尺寸更大）。但在那种情况下 width:50px 将不起作用，我的意思是它也必须是一些更大的值。我不知道如何确定该值。因为正如我一开始所说，任何宽度为 50px 的 box/element 都将由移动设备以某种方式自动处理。如果我设置较大的值，结果图像可能会意外地变大（尽管质量可能符合要求）。

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

你是怎么解决这个问题的？

Answer 1

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

所有 background-position 和 background-size 在所有设备（移动和台式电脑）上都是相同的，唯一的区别是 background-image。在台式电脑上，您可以使用普通（小）spritesheet，而在手机上，您可以使用较大的（如上所述）。

以下是适用于台式机和移动设备的 CSS 代码的 2 个片段：

这是常见的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);
}

要以编程方式将 style/css 切换为 desktop/mobiles，我们可以利用 window.devicePixelRatio。某些旧浏览器不支持此功能，但现在大多数流行的现代浏览器都应该可以使用它。

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

当然，如果可能的话，您应该考虑使用 SVG spritesheet，正如@Dejan.S 在他的评论中提到的那样（当然，多亏了他，我才知道这一点）。很有前途:)

如何处理 CSS sprite（使用 background-position）导致移动设备图像模糊的问题？

How to deal with CSS sprite (using background-position) issue causing blurry images on mobile devices?

html

css

css-sprites