Достаточно ли использовать свойство css3 background-size для отображения сетчатки? - PullRequest
Новая
       15

Достаточно ли использовать свойство css3 background-size для отображения сетчатки?

7 голосов
/ 30 марта 2011

Чтобы быть максимально лаконичным со стилями, я бы не стал использовать таблицу стилей медиазапроса, которая включена, если моя страница просматривается с устройством с двойной плотностью пикселей, таким как iPhone 4.

При этом, было бы хорошо, если бы я просто сделал что-то подобное? 

.icon-1 {
  background-image: url('my-image-64px.png');  // This image is 64 x 64
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px 32px;
}

Будет ли это работать через доску без каких-либо недостатков?Или я должен выполнить какой-то медиа-запрос для устройств с определенной плотностью пикселей?

Ответы [ 3 ]

9 голосов
/ 30 марта 2011

Да, будет.Единственным недостатком является загрузка изображения, которое на намного больше, чем должно быть на дисплеях без сетчатки.Я бы порекомендовал, чтобы в основной таблице стилей у вас были изображения без сетчатки (с размером фона, установленным для всех изображений), и при необходимости включайте таблицу стилей сетчатки, которая переопределяет все URL-адреса изображений со ссылками на изображения с сетчаткой.

Это немного больше работы, но люди с медленной сотовой связью будут вам благодарны.

О, и ваш путь также уменьшит ваш образ для вас, что может быть или не быть в порядке.Если на изображении есть линии шириной 1 пиксель (например), оно не может быть уменьшено таким образом, который вам нравится.Но для большинства типов изображений это, вероятно, будет приемлемым.

3 голосов
/ 22 марта 2012

Чтобы ответить на ваш «медиа-запрос для устройств с определенной плотностью пикселей», ответьте «да»:

media='only screen and (-webkit-min-device-pixel-ratio: 2)

2 голосов
/ 28 марта 2013

В дополнение к сообщению dmackerman, чтобы включить медиа-запрос для браузера, не являющегося webkit, поддерживающего более высокую плотность, можно написать: 

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}

или 

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

}

, которые оба дают одинаковый результат.

...