Как использовать Конвертер CSS-единиц px, em, rem, %, vw, vh онлайн | ТулФокс?

Онлайн-конвертер CSS-единиц ✓ px, em, rem, %, vw, vh, pt, cm, mm ✓ Учёт базового шрифта и viewport ✓ Пресеты устройств ✓ CSS-сниппет ✓ Справочная таблица

Сервис бесплатный?

Да, сервис полностью бесплатный и не требует регистрации

Как часто обновляется инструмент?

Инструмент регулярно обновляется для обеспечения точности работы

Все инструменты Личный кабинет

📐

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

Перевод px в em, rem, %, vw, vh и обратно с учётом контекста

Настройки контекста

Базовый размер шрифта (html/root), px

Используется для расчёта rem

Размер шрифта родителя, px

Используется для расчёта em и %

Ширина viewport, px

Высота viewport, px

Быстрый выбор устройства

Значение

Результат

Популярные размеры (px)

Конвертер CSS-единиц: px, em, rem, %, vw, vh онлайн

Профессиональный онлайн-конвертер CSS-единиц измерения для веб-разработчиков, дизайнеров и верстальщиков. Инструмент мгновенно переводит значения между всеми основными единицами, используемыми в каскадных таблицах стилей: пиксели (px), em, rem, проценты (%), единицы окна просмотра (vw, vh), а также типографские и метрические единицы — пункты (pt), сантиметры (cm), миллиметры (mm) и дюймы (in). Конвертер учитывает контекст: базовый размер шрифта корневого элемента html для расчёта rem, размер шрифта родительского элемента для вычисления em и процентов, а также фактические размеры viewport для единиц vw и vh.

При адаптивной вёрстке сайтов критически важно правильно подбирать единицы измерения. Использование относительных единиц em и rem вместо абсолютных px делает интерфейс гибким и масштабируемым. Калькулятор CSS-единиц помогает быстро перевести пиксели в em, rem в проценты, vw в пиксели и обратно, экономя время на ручных расчётах. Вы задаёте значение в одной единице — и сразу получаете эквиваленты во всех остальных, с возможностью мгновенного копирования любого результата в буфер обмена.

Инструмент особенно полезен при переходе от фиксированного макета к адаптивному, когда нужно массово конвертировать px в em или rem. Встроенная справочная таблица, визуальное превью размера текста и готовый CSS-сниппет ускоряют работу. Пресеты популярных устройств (десктоп 1920×1080, ноутбук 1366×768, планшет 768×1024, телефон 375×812) позволяют моментально переключить контекст viewport для корректного расчёта vw и vh.

Все вычисления выполняются локально в браузере — никакие данные не отправляются на сервер. Конвертер работает без регистрации и без ограничений, одинаково удобно на компьютере и мобильном телефоне. Это незаменимый инструмент для любого, кто работает с CSS: от начинающих верстальщиков до опытных фронтенд-разработчиков.

Ключевые возможности конвертера:

Мгновенная конвертация между 10 CSS-единицами: px, em, rem, %, vw, vh, pt, cm, mm, in
Настраиваемый контекст: базовый размер шрифта (root font-size), размер шрифта родителя, размеры viewport
Пресеты устройств: десктоп, ноутбук, планшет, мобильный телефон
Вывод всех эквивалентов одновременно с быстрым копированием каждого значения
Готовый CSS-сниппет для вставки в код
Визуальное превью размера текста в реальном масштабе
Справочная таблица популярных размеров px → em/rem
Быстрый выбор из часто используемых размеров в пикселях
Полностью клиентская обработка без отправки данных на сервер

Для кого предназначен конвертер CSS-единиц

Инструмент создан для широкого круга специалистов. Фронтенд-разработчики используют его при вёрстке макетов из Figma, Sketch или Adobe XD, где размеры указаны в пикселях, а в CSS нужны rem или em для адаптивности. Веб-дизайнеры быстро проверяют, как типографская шкала выглядит в разных единицах. Начинающие верстальщики учатся понимать соотношение между абсолютными и относительными единицами. Контент-менеджеры подбирают оптимальные размеры текста для разных устройств. Технические писатели переводят размеры из пунктов (pt) в пиксели для экранной типографики.

Как пользоваться конвертером CSS-единиц пошагово

Введите числовое значение

Укажите число в поле ввода и выберите исходную единицу измерения из выпадающего списка. Вы можете ввести любое значение вручную или выбрать одно из популярных значений в пикселях из панели быстрого доступа.

Настройте контекст при необходимости

Нажмите на значок шестерёнки, чтобы открыть панель настроек. Укажите базовый размер шрифта html-элемента (для rem), размер шрифта родительского элемента (для em и %) и размеры viewport (для vw и vh). Или выберите готовый пресет устройства.

Скопируйте нужный результат

Результат конвертации отображается мгновенно. Основной результат виден в поле справа. Ниже — таблица со всеми единицами. Нажмите на любую карточку, чтобы скопировать значение. Используйте кнопку CSS для копирования готового CSS-свойства.

Примеры использования конвертера CSS-единиц

🎨 Вёрстка макета из Figma в адаптивный CSS

Дизайнер передаёт макет с размерами в пикселях: заголовок 32px, основной текст 16px, подпись 12px. Верстальщик открывает конвертер, устанавливает базовый шрифт 16px и быстро переводит все размеры в rem: 2rem, 1rem и 0.75rem соответственно. Это обеспечивает корректное масштабирование при изменении пользователем настроек размера шрифта в браузере.

📱 Адаптация отступов под мобильные устройства

Разработчику нужно задать ширину контейнера, которая занимает 90% экрана на мобильном телефоне. Он выбирает пресет iPhone (375×812), вводит 337px (90% от 375) и видит, что это равно 89.87vw. Округлив до 90vw, он получает универсальное значение, работающее на любом мобильном экране.

📐 Перевод типографских размеров для веба

Полиграфический дизайнер привык работать в пунктах (pt). Заголовки в печатном макете заданы как 24pt, основной текст — 10pt. Конвертер показывает, что 24pt = 32px = 2rem, а 10pt ≈ 13.33px ≈ 0.8333rem. Это помогает сохранить визуальную иерархию при переносе дизайна с бумаги на экран.

⚡ Оптимизация компонентной системы дизайна

При создании UI-библиотеки важно определить систему размеров. Разработчик использует конвертер для построения типографской шкалы: базовый 16px = 1rem, мелкий 14px = 0.875rem, крупный 18px = 1.125rem, заголовок 24px = 1.5rem. Справочная таблица позволяет быстро видеть все соотношения без ручных вычислений.

Таблица соответствий CSS-единиц (при базе 16px)

px	em / rem	% (от 16px)	pt
10px	0.625	62.5%	7.5pt
12px	0.75	75%	9pt
14px	0.875	87.5%	10.5pt
16px	1	100%	12pt
18px	1.125	112.5%	13.5pt
20px	1.25	125%	15pt
24px	1.5	150%	18pt
32px	2	200%	24pt
40px	2.5	250%	30pt
48px	3	300%	36pt
64px	4	400%	48pt
72px	4.5	450%	54pt

Подробное описание CSS-единиц измерения

px — пиксели

Абсолютная единица измерения. 1px соответствует одной физической точке на экране стандартной плотности (96 DPI). На экранах Retina один CSS-пиксель может занимать 2-3 физических пикселя. Пиксели не масштабируются при изменении пользователем размера шрифта в настройках браузера.

em — относительная единица

Зависит от размера шрифта родительского элемента. Если у родителя font-size: 16px, то 1em = 16px, 1.5em = 24px. Удобна для задания отступов и размеров относительно текста компонента. Каскадируется: если вложенные элементы используют em, размер множится на каждом уровне.

rem — корневой em

Зависит от размера шрифта корневого элемента html (по умолчанию 16px). В отличие от em, rem не каскадируется — всегда вычисляется от одного и того же базового значения. Это делает rem предсказуемым и рекомендуемым выбором для размеров текста, отступов и медиазапросов в адаптивной вёрстке.

% — проценты

Рассчитываются относительно родительского элемента. Для font-size процент берётся от font-size родителя. Для width — от ширины родительского блока. Проценты широко применяются в адаптивных сетках и при задании размеров контейнеров, гибко подстраивающихся под экран.

vw — viewport width

1vw равен 1% ширины области просмотра браузера. На экране шириной 1920px, 1vw = 19.2px. Применяется для создания элементов, масштабируемых пропорционально ширине экрана — баннеров, заголовков, полноэкранных секций. Полезна в CSS-функции clamp() для жидкой типографики.

vh — viewport height

1vh равен 1% высоты области просмотра браузера. Часто используется для задания высоты полноэкранных секций (height: 100vh). На мобильных устройствах может вести себя непредсказуемо из-за динамической адресной строки — для таких случаев в современном CSS есть svh и dvh.

Часто задаваемые вопросы о CSS-единицах

Основное различие — точка отсчёта. Единица em вычисляется относительно font-size ближайшего родительского элемента: если у родителя шрифт 20px, то 1em = 20px. При вложенности em каскадируется, что может давать неожиданные результаты. Единица rem (root em) всегда отсчитывается от font-size корневого элемента html, который по умолчанию равен 16px. Это делает rem предсказуемым — 1rem везде одинаков. Для размеров текста и общих отступов рекомендуют rem, а em удобен для внутренних отступов компонентов, чтобы они масштабировались вместе с размером текста внутри.

Пиксели — абсолютные единицы, и элементы, заданные в px, не масштабируются, когда пользователь меняет размер шрифта в настройках браузера (а это важно для доступности). Единицы rem масштабируются пропорционально базовому размеру, поэтому при увеличении шрифта весь интерфейс корректно увеличивается. Также rem упрощает глобальное изменение масштаба: достаточно поменять font-size у html, и все элементы в rem обновятся автоматически. Это экономит время при адаптивной вёрстке и помогает соблюдать стандарты WCAG по доступности.

По умолчанию все браузеры устанавливают font-size корневого элемента html в 16px. Если разработчик не переопределил его в CSS (например, через html { font-size: 62.5%; }, что даёт 10px), базовый размер останется 16px. Чтобы проверить, откройте DevTools (F12), выберите элемент html и посмотрите computed-значение font-size. Именно это число нужно указать в настройках конвертера как базовый размер шрифта для корректного расчёта rem.

Единица vw (viewport width) — это 1% ширины видимой области браузера, vh (viewport height) — 1% высоты. Они удобны для полноэкранных секций (100vh), адаптивных заголовков (font-size: 5vw) и элементов, которые должны занимать определённую долю экрана. Однако на мобильных устройствах vh может быть неточным из-за динамической панели навигации. Для жидкой типографики лучше использовать CSS-функцию clamp() в связке с vw: например, font-size: clamp(1rem, 2.5vw, 2rem) обеспечит размер между 16px и 32px, плавно масштабируясь.

Формула простая: значение в em = значение в px ÷ font-size родительского элемента в px. Например, если родительский элемент имеет шрифт 16px и вам нужно задать отступ 24px, то: 24 ÷ 16 = 1.5em. Для rem формула аналогична, но делить нужно на font-size корневого элемента html. Наш конвертер автоматизирует этот расчёт — вам достаточно ввести значение в пикселях и указать размер шрифта родителя в настройках.

Конвертер выполняет математически точные вычисления согласно спецификации CSS. Абсолютные единицы (px, pt, cm, mm, in) конвертируются по фиксированным коэффициентам: 1in = 96px = 72pt = 2.54cm. Относительные единицы (em, rem, %, vw, vh) зависят от контекста — убедитесь, что базовый размер шрифта и размеры viewport указаны верно. В реальном браузере результат может незначительно отличаться из-за субпиксельного рендеринга и округления.

Да, абсолютно безопасно. Все расчёты выполняются локально в вашем браузере с помощью JavaScript. Никакие данные не отправляются на сервер и не сохраняются. Инструмент не требует регистрации, не использует файлы cookie для отслеживания и работает даже без подключения к интернету после загрузки страницы.

💡 Советы по выбору CSS-единиц для адаптивной вёрстки

Используйте rem для font-size, margin и padding — это обеспечивает масштабируемость при изменении базового размера
Применяйте em для внутренних отступов компонентов, которые должны масштабироваться с текстом
Задавайте ширину контейнеров в процентах или max-width для гибкости
Используйте vw осторожно и в сочетании с clamp() для типографики
Для border-width и box-shadow допустимы px — они не нуждаются в масштабировании
Задавайте line-height без единиц (например, 1.5) для корректного наследования
Тестируйте сайт с увеличенным масштабом браузера (200%) для проверки доступности

ℹ️ О конвертере CSS-единиц

Конвертер постоянно обновляется с учётом актуальной спецификации CSS и обратной связи пользователей. Последнее обновление:

Инструмент работает полностью на стороне клиента, обеспечивая конфиденциальность и максимальную скорость. Поддерживается всеми современными браузерами: Chrome, Firefox, Safari, Edge. Работает на любых устройствах — компьютерах, планшетах и мобильных телефонах.

Если у вас есть предложения по улучшению конвертера или вы хотите видеть дополнительные единицы (svw, svh, dvw, dvh, cqw, cqh), напишите нам через форму обратной связи.