- Абсолютные единицы измерения в CSS
- Базовый CSS-пиксель (px)
- Относительные единицы измерения в CSS
- Жизнь размеров в браузере
Абсолютные единицы измерения в CSS
Абсолютные единицы измерения (absolute length units) в CSS не зависят от родительских стилей, параметров окна документа (viewport) и другого CSS-контекста. Браузер использует их как фиксированную систему отсчёта для определения линейных размеров.
На экранах устройств, классические cm, mm, in, pt и pc не гарантируют совпадения с физической линейкой, вычисляются относительно базового пикселя (px) и, по сути, являются его производными в CSS-мире:
- 1cm (сантиметр) ≈ 37.8px
- 1mm (миллиметр) ≈ 3.78px
- 1in (дюйм, англ. inch) = 96px
- 1pt (типографский пункт, англ. point) = 4/3px (≈ 1.33px, 72pt = 96px)
- 1pc (пика, англ. pica) = 12pt = 16px
Базовый CSS-пиксель (px)
Базовый CSS-пиксель (px) — не физическая точка сетки экрана, а эталонная расчётная единица (reference pixel), определяемая как угловой размер, равный 0.0213°, для отрезка длиной 1/96 дюйма, наблюдаемого с расстояния 28 дюймов (≈71 см):
1 CSS px = ((1/96 дюйма) / 28 дюймов) × (180° / π) ≈ 0.0213°
где:
1/96 дюйма — длина наблюдаемого эталонного отрезка;
28 дюймов — расстояние до наблюдателя;
180° / π — коэффициент перевода радиан в градусы.Базовый CSS-пиксель (px, reference pixel) лежит в основе механизма адаптации и отображения комфортного для чтения визуального размера контента на разных устройствах:
- На стационарных мониторах (десктопных дисплеях) CSS-пиксель обычно совпадает с физическим пикселем устройства вывода.
- На экранах с высокой плотностью (Retina, 4K, смартфоны) один CSS-пиксель физически формируется группой аппаратных точек, что позволяет сохранить привычный визуальный размер элементов.
Если программный CSS-пиксель начнёт всегда соответствовать физическому, то на современных смартфонах стандартный текст превратится в нечитаемую пыль.
Чтобы этого не происходило, отображение веб-страницы подстраивается автоматически.
В результате, текст и элементы интерфейса сохраняют привычный юзер-комфорт.
Относительные единицы измерения в CSS
Относительные единицы измерения (relative length units) в CSS не имеют самостоятельного размера и не существуют сами по себе.
Их финальный масштаб всегда рассчитывается программой на основе базовой величины, которую диктует текущий контекст рендеринга.
В зависимости от типа единицы, базой выступают размеры родительских контейнеров, параметры каскада, метрики используемых шрифтов или габариты окна просмотра (viewport). Это динамическая система отсчёта, необходимая для создания адаптивной и масштабируемой верстки.
Примеры relative length units в CSS и контекст их зависимости (упрощенно):
- em — относительно размера шрифта текущего элемента (при расчёте
font-size— относительно родителя) - rem — относительно размера шрифта корневого элемента
<html> - % — рассчитывается индивидуально в зависимости от свойства (часто — от ширины/высоты родительского элемента)
- vw, vh — относительно ширины и высоты окна просмотра (1vw = 1% от ширины viewport)
- vmin, vmax — относительно меньшей или большей стороны viewport
- ch — относительно ширины символа «0» (ноль) текущего шрифта
- ex — относительно высоты строчной буквы «x» (x-height) текущего шрифта
Жизнь размеров в браузере
Судьба линейного размера внутри клиентского софта всегда одинакова:
- Получение CSS-значений — сбор деклараций, обработка каскада и контекста.
- Вычисление размеров в пикселях — перевод величин в базовый CSS-пиксель (px) и привязка к сетке.
- Вывод элементов на физический дисплей — отрисовка интерфейса в готовых пиксель-размерах.
Сей нехитрый порядок вещей неизменен веками, поскольку активная поверхность дисплея живёт в сугубо дискретном мире и физически слагается из аппаратных пикселей и ничего другого.
Браузер любит пиксели? Рендереру ведома любовь? Да ему всё равно, в чём считать.
Математическая зависимость единиц измерения изначально заложена в вычислительные алгоритмы. Приведение входящих данных к пиксель-знаменателю — обыденная и рутинная внутренняя рендер-стряпня.
Пиксель — наиболее простая форма общения браузера и аппаратной части. И, программа-обозреватель — просто обязана вычислить и подать контроллеру матрицы размеры элементов в пикселях. Потому как пиксель — самый простой способ достичь взаимопонимания с устройством. Браузер общается с железом на языке пикселя. Физический экран — пиксельная штука.
За сим, в финале рендера страницы движок обязательно вычислит для для финального отображения контента точные размеры элементов в пикселях. Независимо от того, в каком виде, объёме и контексте они были изначально заданы в CSS.
Вердикт: CSS-единиц измерения линейных величин много, и они разные. Все, без исключения, они — важны и нужны разработчику. Вычислительные алгоритмы охотно используют их в расчётных процессах, но итоговый результат физическая матрица согласна принять только в пикселях.
Потому что:
- Экран по своей природе дискретен;
- Физическая матрица дисплея состоит из пикселей (или отображение контента привязано к фиксированной сетке точек);
- Финальная растеризация намертво привязана к пиксельной сетке устройства.
Финальная визуализация экрана — дискретна и пиксельна.
Отобразить результат на экране как-то иначе, минуя физическую сетку устройства, технически невозможно.
Увы.
Браузер любит пиксели (px)
Браузер любит пиксели (px), потому что деваться некуда. Потому что сам экран — физически дискретная величина, пиксельная по своей природе. Финальная экранная визуализация всегда неизбежно привязана к пиксельной сетке устройства, независимо от CSS-единиц.
Все эти миллиметры, дюймы, rem и vw —
вообще не физический язык экрана. Это язык CSS-модели — удобный способ
описания размеров для движка браузера
(layout/rendering engine).
Браузер никогда не передаёт экрану
см, мм, дюймы, проценты, rem,
em, vw или что-то подобное.
Экрану, ЭТО — просто не нужно.
Перед самой отрисовкой браузер делает обязательную работу: вычисляет макет (layout), получает конкретные координаты, выдает чистые размеры и работает уже с готовой экранной сеткой устройства.
Монитор — это просто «глупая», работающая по заданным пиксель-координатам. Он понятия не имеет про дюймы, проценты или rem.
CSS-мир растра и измерений заканчивается внутри движка программы: Браузер любит пиксели (px) и превращает все на свете в пиксельную сетку координат, которую видеокарта отправляет на дисплей.
Суть: Все CSS‑единицы (абсолютные и относительные) в конечном счёте приводятся к вычисленным значениям. Абсолютная единица px формально определена как 1/96 дюйма. Это гарантирует предсказуемость: браузер обязан свести любую комбинацию единиц к пикселям для рендеринга. px (пиксели) — основная единица для экранов. Но при вычислении браузер переводит их в точные пиксели для отрисовки Почему это важно Истина: независимо от того, используете ли вы em, rem, vw или cm, браузер обязан рассчитать итоговый размер в пикселях. Практическое следствие: Пиксель — универсальная «валюта» отображения. Это обеспечивает кросс‑браузерную предсказуемость. Именно поэтому дизайнеры и разработчики часто проверяют макеты в пикселях, даже если используют относительные единицы для адаптивности. на визуальной площадке