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

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

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

формула:

где:

- это физическое линейное разрешение

и:

логическое линейное разрешение

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

Обсуждение

CSS "пиксель" даже не определяется как "один элемент изображения на некотором экране", а скорее как нелинейное угловое измерение of угол обзора, который составляет примерно дюйма на расстоянии вытянутой руки. источник: CSS абсолютные длины

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

если вы застряли с растровыми изображениями, чтобы приспособить для различных соотношений пикселя устройства, вы должны использовать Media-запросы CSS в предоставление различных наборов ресурсов для различных групп устройств. Объедините это с хорошими трюками, такими как 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).

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