CSS Sprites RWD + Retina

Question

我找不到任何关于我的问题的有用的建议，所以我决定写一个新的主题。

我正在尝试使用CSS Sprite功能，它对小图像非常有效，但如果我想“剪切”sprite的较大部分-它没有响应。我想使用一个精确的2倍大的图像视网膜和移动显示器。

下面是我的代码：

.sprites {
    background-image: url('../images/sprites.png');
    background-repeat: no-repeat;
    background-size: 1221px 1018px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .sprites {
        background-image: url('../images/sprites@2.png');
    }
}

然后我定义类：

.bag {
    width: 20px;
    height: 20px;
    background-position: -2px -2px;
}

正如您所看到的，我在用于所有div/span的sprite主类中定义了background-size，然后给出了元素的width/height/background-position。这对于像图标这样的小图像是很好的，但如果我有标题(例如。500px x 100px)，所以这对于小型设备来说太大了。

我在这里找到了解决方案:将responsive sprites / percentages转换为按百分比定义的值，但它在我的情况下行不通。

您有什么解决方案来解决这个问题吗？

祝您今天愉快!

Answer 1

我认为解决方案应该是

.sprites {
    background-image: url('../images/sprites.png');
    background-repeat: no-repeat;
    background-size: 1221px 1018px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .sprites {
        background-image: url('../images/sprites@2.png');
        background-size: 2442px 2036px;  /* the real size of the image */
    }
}

.bag {
    width: 20px;
    height: 20px;
    /* bkg calculus: 2px / 1221px   2px / 1018 */
    background-position: -0,1638% -0,19646%;
}