Любые недостатки этого CSS-спрайта для 'retina' дисплеи?

Моя идея, предполагая, что вы начинаете со спрайта 200x200 (, что означает изображение с двойным разрешением 400x400), заключается в следующем:

.sprite {
    background-image:url('1x.png');
    background-repeat: no-repeat;
    background-size: 200px 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   .sprite {
        background-image:url('2x.png');
    }
}

Живой пример:http://ov3rkill.com/temp/a5dii52/

Какое-то время я пытался определить лучший способ доставки изображений с более высоким разрешением (Ранее я хранил все изображения отдельно и масштабировал их по отдельности), и, честно говоря, это кажется слишком простым.

Кто-нибудь может увидеть потенциальные недостатки? Я играю с этим для производственного использования, и пока это работает.

5
задан 4lun 16 April 2012 в 17:39
поделиться