CSS-пиксель

Когда в стилях написано width: 300px, это не означает «300 точек матрицы». Если бы пиксель в CSS был физическим, на смартфоне с плотным экраном текст размером 16 пикселей превратился бы в нечитаемую строчку высотой пару миллиметров. Поэтому спецификация CSS вводит абстрактный «эталонный пиксель», привязанный к тому, как элемент воспринимается глазом на обычном расстоянии, а браузер и операционная система переводят его в физические точки.

Как связан с физическими пикселями

Соотношение называется коэффициентом пикселей устройства, в JavaScript он доступен как window.devicePixelRatio. На старом офисном мониторе он равен 1: один CSS-пиксель — одна точка. У большинства современных смартфонов — 2 или 3, у ноутбуков с плотными экранами — 2 или дробные значения вроде 1,25 и 1,5 при системном масштабировании. Сам экран при этом описывается своей физической плотностью — PPI.

Важное следствие: ширина области просмотра телефона в CSS-пикселях — обычно около 360–430, хотя физически по горизонтали там более тысячи точек. Именно на эти значения и ориентируются медиазапросы. Чтобы мобильный браузер использовал такую ширину, а не имитировал широкий десктоп, в шапку страницы добавляют <meta name="viewport" content="width=device-width, initial-scale=1">.

Пример: чёткая картинка на плотном экране

<img src="/img/logo-160.png"
     srcset="/img/logo-160.png 1x, /img/logo-320.png 2x"
     width="160" height="40" alt="Логотип компании">

Логотип занимает 160 на 40 CSS-пикселей. На экране с коэффициентом 2 для такой площади нужно 320 физических точек по ширине, и браузер сам выберет вторую картинку. Без неё изображение растянется вдвое и станет мыльным. Для иконок проще использовать SVG — вектор чёткий при любой плотности.

Масштаб страницы

Когда пользователь увеличивает масштаб в браузере на десктопе, CSS-пиксель становится крупнее, а devicePixelRatio растёт. Ширина окна в CSS-пикселях при этом уменьшается, и могут сработать мобильные медиазапросы. Это нормально и полезно для доступности, поэтому вёрстку стоит проверять не только на разных устройствах, но и при масштабе 150–200 процентов.