📐

Конвертер 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: от начинающих верстальщиков до опытных фронтенд-разработчиков.

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

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

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

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

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

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

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

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

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

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

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

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

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

📐

Адаптация макета из Figma

Верстальщик Денис получил макет из Figma в пикселях, но проект использовал rem для адаптивности. Нужно было конвертировать все значения.

Установил базовый размер шрифта: 16px (стандарт браузера)

Конвертировал заголовок: 32px → 2rem

Конвертировал отступы: 24px → 1.5rem, 48px → 3rem

Медиа-запросы оставил в px (они не зависят от font-size)

✅

Весь макет был конвертирован за 10 минут. При изменении базового font-size все элементы пропорционально масштабируются

🧠

Факты о единицах CSS

💎

1rem = font-size корневого элемента (html). Если не менять — это 16px в большинстве браузеров.

🔍

Единицы vw/vh (1% ширины/высоты viewport) идеальны для полноэкранных секций, но опасны для текста — на маленьких экранах он становится нечитаемым.

📊

Функция clamp() объединяет min, max и preferred: clamp(1rem, 2vw, 2rem) создаёт «резиновый» размер с ограничениями.

🌟

Единица ch равна ширине символа «0» в текущем шрифте — идеальна для ограничения длины строки (max-width: 70ch).

⚡

Единицы dvh, svh, lvh (dynamic/small/large viewport height) решают проблему 100vh на мобильных, где адресная строка «съедает» часть экрана.

🧠

Пиксель в CSS — не физический пиксель. На Retina-дисплеях 1 CSS-пиксель = 2–3 физических пикселя.

⚠️

rem vs em — важное отличие

rem всегда относительно корневого элемента (html). em — относительно родителя. Вложенные em накапливаются: 1.2em внутри 1.2em = 1.44em от корня. Для предсказуемости используйте rem.

Как пользоваться конвертером 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-единицах

В чём разница между em и rem в CSS?

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

Почему стоит использовать rem вместо px?

Пиксели — абсолютные единицы, и элементы, заданные в 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 и vh и когда их использовать?

Единица 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, плавно масштабируясь.

Как правильно перевести px в em для CSS?

Формула простая: значение в 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 для отслеживания и работает даже без подключения к интернету после загрузки страницы.

Полезная информация

Используйте rem для font-size, margin и padding — это обеспечивает масштабируемость при изменении базового размера

Применяйте em для внутренних отступов компонентов, которые должны масштабироваться с текстом

Задавайте ширину контейнеров в процентах или max-width для гибкости

Используйте vw осторожно и в сочетании с clamp() для типографики

Для border-width и box-shadow допустимы px — они не нуждаются в масштабировании

Задавайте line-height без единиц (например, 1.5) для корректного наследования

Тестируйте сайт с увеличенным масштабом браузера (200%) для проверки доступности

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀