📐

Конвертер REM в PX

Мгновенный перевод rem в пиксели с настройкой базового размера шрифта

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

Значение в REM

rem

Результат в PX

16 px

1 rem × 16 px = 16 px

Конвертер REM в PX онлайн — точный перевод единиц CSS

Бесплатный онлайн-конвертер REM в пиксели (PX) для веб-разработчиков, дизайнеров и верстальщиков. Инструмент мгновенно пересчитывает значения из относительных единиц rem в абсолютные пиксели, учитывая заданный базовый размер шрифта корневого элемента (html root font-size). По умолчанию браузеры используют базовый размер 16px, однако в современных проектах часто устанавливают другие значения — 10px для удобства расчётов или 18-20px для повышения читаемости. Наш конвертер rem to px позволяет гибко настраивать базовый размер и получать точный результат.

Единица измерения rem (root em) привязана к размеру шрифта корневого элемента HTML-документа. В отличие от em, который зависит от родительского элемента, rem всегда опирается на корневой элемент, что делает его предсказуемым и удобным для построения масштабируемых интерфейсов. Формула перевода рем в пиксели предельно проста: значение в rem умножается на базовый размер шрифта в пикселях. Например, если базовый размер равен 16px, то 1rem = 16px, 1.5rem = 24px, 2rem = 32px. Конвертер rem в px автоматически выполняет этот расчёт для любых значений.

Зачем нужен конвертер REM в PX? При вёрстке адаптивных сайтов разработчики повсеместно используют rem для задания отступов (margin, padding), размеров шрифтов (font-size), ширины и высоты блоков. Однако при визуальной проверке макета, отладке в DevTools или обсуждении дизайна с коллегами часто требуется знать точное значение в пикселях. Калькулятор rem to pixel экономит время и исключает ошибки ручного пересчёта, особенно когда базовый размер отличается от стандартных 16 пикселей.

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

Наш онлайн-калькулятор rem px особенно полезен при работе с популярными CSS-фреймворками, такими как Tailwind CSS, Bootstrap и Material UI, где единицы rem используются повсеместно. Также инструмент помогает при создании дизайн-систем, когда необходимо перевести пиксельные значения из макета Figma или Sketch в rem для кода. Конвертер поддерживает любые дробные значения с точностью до четырёх знаков после запятой, что покрывает все реальные сценарии использования в профессиональной веб-разработке.

Мгновенный перевод rem в px с автоматическим пересчётом при вводе
Настраиваемый базовый размер шрифта: 10px, 14px, 16px, 18px, 20px или произвольный
Пакетная конвертация нескольких значений REM одновременно
Готовая справочная таблица REM в PX для быстрой работы
Копирование результатов в один клик — значения и CSS-комментарии
Наглядная формула расчёта для понимания принципа конвертации
Полностью бесплатный инструмент без ограничений и регистрации
Frontend-разработчики — быстрая проверка размеров при отладке CSS, конвертация значений из макета
Верстальщики — перевод пиксельного дизайна в rem-единицы и обратная проверка
UI/UX-дизайнеры — понимание реальных размеров элементов при работе с типографикой
Начинающие разработчики — изучение CSS-единиц измерения и понимание связи rem и px
QA-инженеры — проверка соответствия вёрстки макету при тестировании интерфейсов
Контент-менеджеры — настройка размеров текста и отступов на сайтах с CMS

ℹ️ О конвертере REM в пиксели

Онлайн-конвертер rem в px разработан для максимального удобства веб-разработчиков и дизайнеров. Инструмент постоянно обновляется с учётом обратной связи пользователей.

Все расчёты выполняются в браузере с использованием JavaScript. Конвертер рем в пиксели не требует установки, работает на любых устройствах и полностью бесплатен. Формула перевода: px = rem базовый размер шрифта (root font-size).

Если у вас есть идеи по улучшению калькулятора rem to px или вы заметили неточность, сообщите нам через форму обратной связи. Мы ценим каждый отзыв и стремимся сделать инструмент максимально полезным для профессионального сообщества веб-разработчиков.

🔍

Отладка вёрстки

Верстальщик Дмитрий искал баг: элемент с padding: 1.25rem выглядел не так, как в макете (20px). Нужно было проверить вычисленное значение.

Проверил базу: html font-size = 16px (стандарт)

Конвертировал: 1.25rem × 16px = 20px — совпадает с макетом

Обнаружил: на странице был html { font-size: 14px } — кто-то изменил базу

С новой базой: 1.25rem × 14px = 17.5px — вот причина расхождения

✅

Дмитрий восстановил html { font-size: 16px }, и вёрстка совпала с макетом

🧠

Факты о rem и px

💎

rem (root em) всегда относительно html font-size. При стандартной базе 16px: 1rem = 16px, 0.5rem = 8px, 2rem = 32px.

🔍

Формула обратная: px = rem × base. Если base = 16px: 1.5rem = 24px, 0.875rem = 14px.

📊

DevTools в Chrome показывает вычисленное значение в px для любого rem — вкладка Computed.

🌟

Tailwind CSS v3 использует rem по умолчанию: класс p-4 = padding: 1rem = 16px.

⚡

На iOS input с font-size < 16px вызывает авто-зум формы — минимум 1rem для полей ввода.

🧠

PostCSS-плагин pxtorem автоматически конвертирует px → rem в CSS на этапе сборки.

Таблица соответствий REM и PX (при базовом размере 16px)

REM	PX (base 16px)	Применение в CSS
0.25rem	4px	Минимальные отступы, тонкие линии
0.5rem	8px	Мелкие отступы, gap в grid/flex
0.75rem	12px	Размер мелкого текста, caption
0.875rem	14px	Вспомогательный текст, подписи, label
1rem	16px	Основной размер текста (body)
1.125rem	18px	Увеличенный body, акцентный текст
1.25rem	20px	Подзаголовки, h4-h5
1.5rem	24px	Заголовки h3, крупные отступы
2rem	32px	Заголовки h2, секционные отступы
2.5rem	40px	Крупные заголовки h1
3rem	48px	Hero-секции, баннерный текст
4rem	64px	Display-заголовки, лендинги
5rem	80px	Декоративные элементы, hero-блоки

Сравнение единиц измерения CSS: rem, em, px, vw

Единица	Привязка	Масштабируемость	Когда использовать
rem	Корневой элемент html	Да, предсказуемая	Размеры шрифтов, отступы, компоненты
em	Родительский элемент	Да, каскадная	Внутренние отступы относительно текста
px	Экран устройства	Нет	Границы, тени, фиксированные размеры
vw / vh	Размер viewport	Да, адаптивная	Полноэкранные секции, fluid-типографика
%	Родительский элемент	Да, относительная	Ширина контейнеров, сетки

⚠️

Проверяйте базовый font-size

Конвертация rem → px зависит от html font-size. Если кто-то изменил его (62.5%, 14px, 10px), все rem-значения изменятся. Всегда проверяйте базу перед расчётами.

Как работает единица измерения REM в CSS

Укажите базовый размер шрифта

Выберите базовый размер шрифта корневого элемента (root font-size) вашего проекта. Стандартное значение в большинстве браузеров — 16px. Если в CSS вашего проекта задан html { font-size: 10px } или html { font-size: 62.5% }, выберите соответствующее значение для точного расчёта.

Введите значение в REM

Введите числовое значение rem, которое хотите перевести в пиксели. Поддерживаются дробные числа, например 0.875, 1.25, 2.5. Результат в px отобразится автоматически. Для массовой конвертации используйте вкладку "Пакетная конвертация" — введите несколько значений через запятую или с новой строки.

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

Нажмите кнопку копирования, чтобы скопировать результат в пикселях в буфер обмена. Также доступно копирование в формате CSS-комментария для вставки в код. Вкладка "Таблица" позволяет быстро просматривать соответствия для наиболее распространённых значений rem.

Примеры использования конвертера rem в пиксели

💻 Вёрстка по дизайн-макету из Figma

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

⚙️ Работа с Tailwind CSS классами

Tailwind CSS использует rem для большинства утилит. Класс p-4 задаёт padding: 1rem, text-lg — font-size: 1.125rem. С помощью конвертера разработчик быстро определяет: p-4 = 16px, text-lg = 18px, gap-6 (1.5rem) = 24px. Пакетная конвертация позволяет проверить все значения за один раз.

📱 Адаптивная типографика

При создании адаптивного сайта разработчик меняет базовый размер шрифта для разных экранов: 14px для мобильных, 16px для планшетов, 18px для десктопов. Конвертер rem to pixel помогает проверить, как изменятся реальные размеры элементов при каждом базовом значении, переключая base font-size одним кликом.

🔍 Аудит доступности (a11y)

При аудите доступности веб-сайта QA-специалист проверяет минимальные размеры кликабельных элементов и текстов. Стандарт WCAG требует размер шрифта не менее 16px и кликабельные зоны не менее 44px. Конвертер позволяет быстро проверить: 2.75rem при base 16px = 44px — требование выполнено.

Часто задаваемые вопросы о конвертации REM в PX

Что такое rem в CSS и чем отличается от px?

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

Как перевести rem в пиксели вручную?

Формула перевода rem в px: значение в rem умножить на базовый размер шрифта корневого элемента. По умолчанию базовый размер = 16px. Пример: 2.5rem 16px = 40px. Если базовый размер изменён на 10px (html { font-size: 62.5% }), то 2.5rem 10px = 25px. Онлайн-конвертер rem to px выполняет этот расчёт автоматически.

Какой базовый размер шрифта выбрать для проекта?

Стандартное значение — 16px, оно установлено по умолчанию во всех браузерах и обеспечивает хорошую читаемость. Некоторые разработчики используют html { font-size: 62.5% } (10px) для упрощения расчётов: 1.6rem = 16px, 2rem = 20px. Для проектов с акцентом на типографику выбирают 18-20px. Рекомендуется не задавать базовый размер в пикселях напрямую, а использовать проценты для сохранения пользовательских настроек браузера.

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

Rem привязан к корневому элементу html и всегда одинаков независимо от вложенности. Em привязан к font-size родительского элемента и каскадируется при вложенности. Например, вложенный элемент с font-size: 1.2em внутри другого с 1.2em будет иметь фактический размер 1.44em от корневого. С rem такой проблемы нет: 1.2rem всегда равен одному и тому же количеству пикселей.

Почему rem лучше пикселей для адаптивной вёрстки?

При использовании пикселей размеры элементов фиксированы и не реагируют на пользовательские настройки. Rem обеспечивает автоматическое масштабирование всего интерфейса при изменении базового размера шрифта — через медиа-запросы или пользовательские настройки браузера. Это критично для доступности (WCAG) и удобства на разных устройствах, от мобильных телефонов до мониторов 4K.

Как использовать конвертер при работе с Tailwind CSS?

Tailwind CSS по умолчанию использует rem для spacing, font-size и других свойств. Утилита p-4 = 1rem = 16px, text-xl = 1.25rem = 20px, gap-8 = 2rem = 32px. Конвертер помогает быстро определить реальный размер в пикселях для любого класса Tailwind. Используйте пакетную конвертацию для проверки нескольких классов одновременно.

Безопасен ли конвертер? Отправляются ли данные на сервер?

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

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

Задавайте базовый размер через проценты: html { font-size: 100% } вместо html { font-size: 16px } — это сохранит пользовательские настройки

Для удобства расчётов используйте html { font-size: 62.5% } (10px), тогда 1.6rem = 16px, 2rem = 20px

Используйте rem для font-size, margin, padding и width/height компонентов

Оставьте px для border-width, box-shadow и outline — эти свойства обычно не нужно масштабировать

Проверяйте доступность: увеличьте базовый размер шрифта в браузере до 200% и убедитесь, что интерфейс остаётся читаемым

В медиа-запросах rem тоже работает: @media (min-width: 48rem) соответствует 768px при стандартном размере

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

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

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

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