Конвертер Единиц CSS Онлайн
Конвертируйте между единицами CSS: px, em, rem, vh, vw и другими.
Click any value to copy
Зачем это нужно
Конвертер единиц CSS: px, em, rem и другие
Все единицы
px, em, rem, vh, vw, %, pt, cm и другие единицы в одном инструменте.
Без интернета
Конвертация в браузере без отправки данных на сервер.
Контекстный расчёт
Задайте базовый размер шрифта для точного перевода em/rem.
Мгновенно
Все эквиваленты отображаются одновременно при вводе.
Как это работает
Три шага — никаких сложностей
Введите значение
Введите значение и выберите исходную единицу CSS.
Укажите контекст
Для em/rem укажите базовый размер шрифта; для % — размер родительского элемента.
Получите результат
Инструмент показывает эквивалент во всех основных единицах CSS одновременно.
FAQ
Остались вопросы?
em — относительная единица, зависящая от размера шрифта текущего элемента. Если у родителя font-size: 20px, а у элемента 1.5em — это 30px. rem (root em) — всегда относится к font-size корневого элемента (<html>), по умолчанию 16px. rem предсказуем и не зависит от контекста вложенности, что делает его предпочтительным для большинства применений.
vh (viewport height) — 1% высоты окна браузера, vw (viewport width) — 1% ширины. 100vh = полная высота окна. vmin — меньшее из vh и vw, vmax — большее. Новые единицы dvh/svh/lvh учитывают мобильные браузеры с динамически изменяющейся адресной строкой.
Браузеры устанавливают размер шрифта по умолчанию 16px для корневого элемента html. Пользователи могут изменить этот размер в настройках браузера. Это важно для доступности: фиксированные px-размеры шрифтов игнорируют пользовательские настройки, тогда как rem-значения масштабируются вместе с ними.
px: для границ (borders), теней (box-shadow), точно определённых элементов, где масштабирование нежелательно. rem: для размеров шрифта — поддерживает пользовательские настройки. em: для отступов (padding, margin), привязанных к размеру шрифта элемента. %, vh, vw: для адаптивных размеров контейнеров.
ch — ширина символа '0' в текущем шрифте, полезна для задания ширины полей ввода. lh — высота строки (line-height) текущего элемента, удобна для отступов, кратных высоте строки. Оба поддерживаются в современных браузерах (Chrome 86+, Firefox 71+, Safari 15.4+).
CSS единицы измерения: история, спецификация и адаптивный дизайн
CSS Values and Units Module Level 3 (W3C) определяет все CSS-единицы. Абсолютные единицы (px, pt, cm, mm, in) фиксированы. Относительные (em, rem, %, vh, vw, ch, ex) зависят от контекста. История: px изначально были привязаны к физическим пикселям монитора, но с появлением HiDPI экранов (Retina) стали условными — 1px CSS = 2 физических пикселя на Retina.
Адаптивный дизайн (responsive design) сделал относительные единицы необходимостью. Этьен Маркотт в статье «Responsive Web Design» (2010) популяризировал использование процентов для создания гибких сеток. Переход от px к rem для шрифтов стал стандартом после публикации Джонатана Снука «Scalable and Modular Architecture for CSS» (SMACSS).
Новые единицы CSS: свежие спецификации вводят container query units (cqw, cqh — относительно container) и interpolate-size для анимации в size: auto. Логические свойства (inline-size, block-size) и их единицы работают правильно для RTL-языков. Масштабирование на основе rem остаётся лучшей практикой для типографики в 2025 году.