Расчеты разрешения CSS

Question

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

Однако разрешение медиа-запроса меня смущает. Я считаю, что многие дисплеи без сетчатки имеют разрешение CSS 96ppi или 96dpi, а дисплеи с сетчаткой имеют разрешение 192ppi или 192dpi.

Как именно рассчитывается это значение? Это как формула или что-то?

Answer 1

Вы слишком усложняете вещи.

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

Например, если вы использовали медиа-запрос:

@media screen and (min-width: 480px)

вы бы поразили любое устройство, которое сообщило, что его ширина составляет 480 css пикселей (или больше). Фактическое количество физических пикселей не имеет значения, это не проблема автора CSS.

Одна область, где это не так, это изображения. Возможно, вы захотите подавать изображения, которые в два раза качественнее, на устройства Retina, так как эти дополнительные пиксели будут полезны для ясности изображения, и в этом случае будет полезен медиа-запрос dpi. (предостережение: имейте в виду, что многие пользователи мобильных устройств предпочли бы быстрее загружать страницу, чем иметь изображение очень высокого качества, которое в четыре раза больше размера).

@media screen and (min-resolution: 192dpi) {
    /* load that high definition image here */
}

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