Как правильно делать спрайты под ретину?

Question

[howehohit]

Здравствуйте. Не могу сообразить, как делать правильно спрайты под ретину.
Гулпом генерирую 2 файла спрайтов. Один с обычными иконками, второй с в 2 раза большими. Потом задаю блоку такие стили:
.block:before{content: ''; width: 10px; height: 16px; position: absolute; top: 0; left: -20px; background: url("../images/sprite.png") no-repeat -104px -18px;}
И потом стили для ретины:
media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 192dpi) {
.block:before{
background: url("../images/[e-mail]") -196px -33px;
}
}
Но получается, что картинка под ретину не масштабируется. Прописываю background-size: 10px 16px; и картинка спрайта под ретину вся масштабируется, а не нужная иконка.
Как победить напасть? Заранее спасибо

Answer 1

[Андрей Хохлов]

Стили для обычных экранов должны содержать:
background-size
background-position
width и height иконки
и background-image

Стиль для retina-экрана переопределяет только background-image.
В этом случае, при точном совпадении спрайтов, все будет работать.

Comments

[howehohit]

У меня все так и есть, но все-равно спрайт масштабируется весь вместо конкретной иконки. Причем, если указать background-size - то даже на обычной версии

[Андрей Хохлов]

Естественно он будет масштабировать всю картинку-спрайт. Как иначе то?

[howehohit]

Андрей Хохлов: он масштабирует её под размер иконки. И выходит вот так c2n.me/3pE8JSI

[Андрей Хохлов]

howehohit
Спрайт 100*100px
Его ретина вариант 200*200px
background-size: 100px 100px
Это что касается размеров. Ретина-картинка делает вид что она в 2 раза меньше - как её неретина-собрат. По сути поставили её и забыли.

Теперь про background-position.
Представьте себе бумажку, на которой нарисованы иконки.
И другую бумажку, в которой вырезано дырочка.
Мы двигаем нижнюю бумажку, чтобы в дырочке оказалась нужная нам иконка.

Width и height блока, на фон которого мы ставим иконку из спрайта - это размеры этой самой дырочки.

Я хз как ещё более "на пальцах" обьяснить.

[howehohit]

Спасибо, понял в чем была ошибка) в том, что я в background-size писал размер иконки, а не всего спрайта :) Премного благодарен!