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

Question

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

http://jsfiddle.net/H9FcH/

有人能告诉我它在iphone上是否正常？我不确定那50%.还有,有没有人有更好的文章？

Answer 1

background-size您为启用Retine的设备指定的属性应包含非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;
        }
}