iphone - 为视网膜显示优化的精灵

Question

我正在构建一个响应式网站，所以我一直在阅读有关移动设备和 iphone 上的 css sprites 的信息。我找到了这篇文章，我认为这是正确的技术，但解释可能会更好。我最终得到了这个：

http://jsfiddle.net/H9FcH/

有人能告诉我在iphone上看起来是否还可以吗？我不确定那 50%。另外，有人有更好的文章吗？

Answer 1

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

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

屏幕截图（视网膜）：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;
        }
}