Использование CSS-спрайтов при поддержке дисплеев с высокой плотностью

Question

Использование CSS-спрайтов при поддержке дисплеев с высокой плотностью

Можно ли использовать CSS-спрайты и при этом поддерживать дисплеи высокой плотности (например, сетчатки)? Это может означать упаковку изображений с нормальным и двойным разрешением в один спрайт-лист... Проблема в том, как мне указать смещения? Другим возможным решением было бы как-то определить (как?) Плотность экрана и применить класс к телу.

Кто-нибудь сталкивался с этой проблемой? Какие-нибудь элегантные решения?

2

css css-sprites highdpi

Источник

user355325 24 сен '13 в 02:38

2 ответа

Решение

Как это: -webkit-min-device-pixel-ratio

@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) {
ul li {
background-image: url('icons-sprite@2x.png');
}
}

Это может быть retina.png или любая другая версия hd...

Это должно работать на любом HD планшете и мобильном телефоне

3

Источник

user1181897 24 сен '13 в 02:50

Другие вопросы по тегам css css-sprites highdpi

user34397 24 сен '13 в 02:43 2013-09-24 02:43 · Accepted Answer · 2013-09-24 02:43

Вы можете использовать min-device-pixel-ratio Медиа-запрос для загрузки отдельного листа спрайта (и указания отдельных смещений) или для указания отдельных смещений в одной и той же таблице спрайтов.

Было бы лучше использовать отдельную таблицу спрайтов для каждой плотности, чтобы клиентам не приходилось загружать пиксели, которые они все равно не могут отобразить.

Вы можете использовать миксин LESS или SASS, чтобы указать смещение один раз и сгенерировать второе правило медиа-запроса, которое удваивает смещение.