Конвертация единиц CSS — процесс пересчёта между различными единицами длины (px, em, rem, %, vw, vh и т.д.), применяемыми в веб-дизайне.
Абсолютные и относительные единицы
Единицы CSS делятся на абсолютные и относительные. Абсолютные (px, pt, cm и т.д.) имеют фиксированный размер, относительные (em, rem, %, vw, vh и т.д.) выражаются как отношение к базовой величине.
px (Пиксель)
Наиболее распространённая единица, представляющая одну точку на экране. Удобна при фиксированном размере, но вызывает трудности с доступностью, так как игнорирует настройки шрифта пользователя.
em (Em)
Относительная единица, основанная на размере шрифта родителя. 1em = font-size родителя. Вложенность может приводить к накопительному эффекту и неожиданным размерам.
rem (Root Em)
Относительная единица, основанная на размере шрифта корневого элемента (html). 1rem = font-size html (обычно 16px). Не зависит от вложенности, рекомендуется в современном CSS.
% (Процент)
Отношение к размеру родительского элемента. Для font-size — относительно родителя; для ширины — относительно ширины родителя. Основание зависит от свойства.
vw/vh (Единицы окна просмотра)
Единицы, основанные на размерах окна просмотра. 1vw = 1% ширины окна, 1vh = 1% высоты окна. Позволяют создавать гибкие макеты, реагирующие на размер экрана.
pt/pc (Печатные единицы)
Единицы, используемые в полиграфии. 1pt = 1/72 дюйма, 1pc = 12pt. Применяются в печатных стилях и при генерации PDF; для экрана чаще используют px или rem.
Физические единицы (cm/mm/in)
Единицы реальной физической длины. 1in = 2.54cm = 25.4mm = 96px (определение CSS). Используются для соответствия печатным материалам, но физический размер экрана не гарантирован.
Преимущества конверсии в реальном времени
Инструмент поддерживает обновление результатов в реальном времени при изменении базовых значений. Ускоряет проверку внешнего вида в разных условиях и настройках шрифта.