Question

我无法找到有关我的问题的任何有用的消息，所以我决定写一个新主题。

我试图使用CSS Sprite功能，它对小图片非常有效，但如果我想要＆＃34; cut＆＃34;精灵的更大部分 - 它没有响应。我想为Retina和移动显示器使用精确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;
}

正如你所看到的，我在主sprite类中定义了background-size，它用于所有div / spans，然后给出元素的宽度/高度/背景位置。它对于像图标这样的小图像很有用，但如果我有标题（例如500px x 100px），那么这对于小型设备来说太大了。

我在这里找到了解决方案：Docker docs 按百分比定义的值，但在我的情况下不能正常工作。

您有解决此案的任何解决方案吗？

度过美好的一天！

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%;
}

CSS Sprites RWD + Retina

1 个答案: