Короткий ответ

Соотношение пикселей устройства - это соотношение между физическими пикселями и логическими пикселями. Например, iPhone 4 и iPhone 4S сообщают о соотношении пикселей устройства в 2, потому что физическое линейное разрешение удваивает логическое линейное разрешение.

• Физическое разрешение: 960 x 640
• Логическое разрешение: 480 x 320

Формула:

[/g15]

Где:

[/g16] является физическим линейным разрешением

и:

[/g17] является логическим линейным разрешением

Другие устройства сообщают о различных соотношениях пикселей устройства, включая нецелые. Например, Nokia Lumia 1020 сообщает 1.6667, Samsumg Galaxy S4 сообщает 3, а Apple iPhone 6 Plus сообщает 2.46 (источник: dpilove ) . Но это ничего не меняет в принципе, так как вы никогда не должны проектировать ни одно конкретное устройство.

Обсуждение

«пиксель» CSS даже не определен как «один элемент изображения на некоторый экран ", а скорее как нелинейное угловое измерение угла наблюдения [/g18], которое составляет приблизительно [/g19] дюйма на расстоянии вытянутой руки. Источник: Абсолютные длины CSS

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

Если вы застряли с растровыми изображениями, чтобы соответствовать различным соотношениям пикселей устройства, вы должны использовать CSS Media Queries для предоставления различных наборов ресурсов для разных групп устройств. Объедините это с хорошими трюками, такими как background-size: cover , или явно установите процентные значения background-size .

Пример

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

Таким образом, каждый тип устройства загружает только правильный ресурс изображения. Также имейте в виду, что блок px в CSS всегда работает с логическими пикселями.

Случай для векторной графики

Поскольку появляется все больше и больше типов устройств, становится сложнее предоставить все из них имеют адекватные растровые ресурсы. В CSS запросы на медиа в настоящее время являются единственным способом, а в HTML5 элемент изображения позволяет использовать разные источники для разных мультимедийных запросов, но поддержка по-прежнему не на 100%, поскольку большинство веб-разработчиков по-прежнему вынуждены поддержка IE11 еще некоторое время (источник: caniuse ) .

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