Конвертер единиц CSS

Онлайн-конвертер переводит длины CSS между единицами px, rem, em, %, vw и vh. Относительные единицы зависят от контекста — размера шрифта, ширины родителя или окна, поэтому контекст задаётся явно, а не угадывается.

Генератор clamp() рассчитывает плавный размер: текст растёт от минимального значения на узком экране до максимального на широком и не выходит за эти границы.

Как пользоваться
  • Введите значение и выберите его единицу — таблица покажет ту же длину во всех единицах. При смене единицы значение пересчитывается, длина остаётся прежней.
  • В блоке «Контекст» укажите размеры, от которых считаются относительные единицы. По умолчанию — 16px шрифта, как в браузерах без пользовательских настроек.
  • Для clamp() задайте минимальный и максимальный размер и ширины окна, между которыми размер меняется. Ползунок показывает, каким будет размер при выбранной ширине.
  • Кнопки копирования берут готовое значение для вставки в CSS.

Конвертер единиц

Контекст, px
для rem; в браузере по умолчанию 16px
элемента, а в свойстве font-size — родителя
для %
для vw
для vh
Значение в разных единицах
px24pxабсолютное значение
rem1.5remот font-size корневого элемента
em1.5emот font-size элемента (в самом font-size — родителя)
%3%от ширины родителя (для width, padding, margin)
vw1.6667vwот ширины окна
vh2.6667vhот высоты окна

Генератор clamp()

Размер и ширина окна, px
font-size: clamp(1.125rem, 0.8333rem + 1.2963vw, 2rem);

rem берётся от font-size корня из конвертера (16px), поэтому размер растёт вместе с настройкой шрифта в браузере.

Размер текста: 23.29px

Какие единицы выбирать
  • rem — от font-size корневого элемента html. Подходит для размеров шрифта и отступов: они масштабируются вместе с настройкой шрифта в браузере.
  • em — от font-size самого элемента, а внутри свойства font-size — от размера шрифта родителя. Удобно для отступов, которые должны расти вместе с текстом компонента; при вложенности значения перемножаются.
  • % — зависит от свойства: для width, padding и margin считается от ширины родителя, для font-size — от шрифта родителя, для height — от высоты родителя, если она задана.
  • vw и vh — проценты ширины и высоты окна. На телефонах высота окна меняется при появлении панели браузера; для таких случаев есть svh, lvh и dvh.
  • px — CSS-пиксель, а не физическая точка экрана. Размер шрифта в px не следует за настройкой шрифта пользователя.

Размер текста только в vw не реагирует на масштаб шрифта, поэтому в clamp() к vw добавляется слагаемое в rem. Подробнее о единицах — в статье «Единицы измерения в CSS».