Sprites针对视网膜显示进行了优化

Question

我正在建立一个响应式网站，所以我一直在阅读有关移动设备和iphone上的CSS精灵。我发现this article，我认为这是正确的技术，但解释可能会更好。我最终得到了这个：

http://jsfiddle.net/H9FcH/

有人可以告诉我它在iphone上是否正常？我不确定那50％。 还有，有没有人有更好的文章？

Answer 1

为启用Retine的设备指定的background-size属性应包含非Retina精灵的大小，即Retina精灵的宽度的一半和高度的一半。它应该是总精灵的大小，因此不仅仅是精灵中单个图标的大小。

更新小提琴： http://jsfiddle.net/jhogervorst/qr5fs/2/

屏幕截图（Retina）： http://i.stack.imgur.com/sIDnE.png

<强> CSS：

@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) {
        .action {
            background-image: url(http://dl.dropbox.com/u/13823768/masonry/img/test-sprite2x.png);
            -moz-background-size: 153px 64px;
            -o-background-size: 153px 64px;
            -webkit-background-size: 153px 64px;
            background-size: 153px 64px;
        }
}