🔄

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

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

px (по умолчанию в браузере — 16px)

Пиксели (px)

Результат (rem)

rem

CSS

font-size: 1rem; /* 16px */

Предпросмотр размера текста

Аа Бб Вв

16px = 1rem (при базовом 16px)

Таблица PX в REM (база 16px)

Нажмите на ячейку для копирования значения в REM

Загрузка инструмента...

Конвертер PX в REM онлайн — мгновенный пересчёт пикселей в rem

Онлайн-конвертер PX в REM — профессиональный бесплатный инструмент для мгновенного перевода пикселей (px) в относительные единицы измерения rem. Конвертация PX в REM необходима каждому веб-разработчику и верстальщику, который создаёт адаптивные и доступные сайты. Наш калькулятор PX to REM мгновенно рассчитывает результат при вводе значения — без нажатия кнопок и перезагрузок. Поддерживается изменение базового размера шрифта (root font-size), пакетная конвертация нескольких значений одновременно, а также визуальный предпросмотр размера текста прямо в интерфейсе.

Единица измерения rem (root em) вычисляется относительно размера шрифта корневого элемента HTML-документа. По умолчанию браузеры устанавливают базовый размер шрифта 16 пикселей, то есть 1rem равен 16px. Конвертер пикселей в rem позволяет быстро пересчитать любое значение в пикселях: font-size, margin, padding, width, height и другие CSS-свойства. Это упрощает процесс вёрстки адаптивных макетов, где использование относительных единиц значительно улучшает масштабируемость и доступность интерфейса.

Зачем переводить PX в REM? Пиксели — фиксированная единица, привязанная к экрану. Единица rem масштабируется вместе с пользовательскими настройками размера шрифта в браузере, что критически важно для доступности: пользователи с ослабленным зрением увеличивают базовый размер текста, и интерфейс на rem корректно масштабируется. Все современные CSS-фреймворки — Tailwind CSS, Bootstrap, Material UI — активно используют rem вместо px для типографики, отступов и размеров компонентов. Правильное использование rem-единиц входит в рекомендации WCAG по веб-доступности.

Формула перевода PX в REM проста: REM = PX / базовый размер шрифта. При стандартных настройках (base font-size = 16px) формула выглядит так: rem = px / 16. Например, 24px = 24 / 16 = 1.5rem, 14px = 14 / 16 = 0.875rem. Если вы изменили базовый размер шрифта в CSS (например, html {font-size: 10px}), то пересчёт происходит с учётом нового значения: 24px = 24 / 10 = 2.4rem. В нашем конвертере вы можете указать любой базовый размер шрифта для точного расчёта.

Инструмент пригодится фронтенд-разработчикам, верстальщикам, дизайнерам интерфейсов и всем, кто работает с CSS. Вы можете использовать одиночный режим для быстрого перевода одного значения или пакетный режим для конвертации целого набора размеров из макета дизайнера. Результаты легко копируются в буфер обмена в удобном формате: только rem-значение, таблица соответствий или CSS-комментарий. Встроенная справочная таблица самых популярных размеров (от 1px до 96px) с возможностью копирования одним кликом ускоряет повседневную работу.

Конвертер px to rem создан для широкого круга специалистов. Frontend-разработчики используют его при вёрстке компонентов и адаптивных макетов, чтобы быстро пересчитать размеры из пиксельного дизайна в rem-единицы CSS. Верстальщики применяют пакетный режим для массовой конвертации всех размеров шрифтов и отступов из Figma или Photoshop-макета. UI/UX-дизайнеры пользуются калькулятором для проверки масштабируемости типографической системы и создания последовательных шкал размеров. Студенты и начинающие разработчики через визуальный предпросмотр наглядно видят, как соотносятся пиксели и rem-единицы, что помогает лучше понять CSS-единицы измерения.

Мгновенный перевод пикселей в rem — результат обновляется в реальном времени при вводе
Настраиваемый базовый размер шрифта (root font-size) — поддержка любого значения, не только 16px
Пакетная конвертация — перевод списка значений px в rem одним нажатием
Копирование результата в трёх форматах: rem, таблица PX = REM, CSS-комментарий
Визуальный предпросмотр размера текста прямо в браузере
Готовый CSS-сниппет для быстрой вставки в код
Справочная таблица 22 популярных размеров PX → REM с копированием по клику
Полностью клиентская работа — данные не отправляются на сервер

ℹ️ О конвертере PX в REM

Конвертер постоянно обновляется с учётом лучших практик веб-разработки.

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

Конвертер PX в REM разработан на базе платформы ТулФокс и совместим со всеми современными браузерами: Chrome, Firefox, Safari, Edge. Работает на любом устройстве — компьютере, планшете, смартфоне.

🎨

Рефакторинг дизайн-системы

Команда Дениса переводила дизайн-систему с px на rem для лучшей доступности (пользователи могут увеличить базовый шрифт).

Установили базу: html { font-size: 16px } (100%)

Конвертировали типографику: 14px → 0.875rem, 16px → 1rem, 18px → 1.125rem, 24px → 1.5rem, 32px → 2rem

Конвертировали отступы: 8px → 0.5rem, 16px → 1rem, 24px → 1.5rem, 32px → 2rem

Оставили в px: border-width, box-shadow, медиа-запросы (они не должны масштабироваться)

✅

Пользователи с увеличенным шрифтом в браузере получили корректное масштабирование всего интерфейса

🧠

Факты о px и rem

💎

При базе 16px: 1rem = 16px, 0.5rem = 8px, 2rem = 32px. Формула: rem = px / 16.

🔍

rem решает проблему доступности: если пользователь увеличивает шрифт в браузере, все rem-размеры масштабируются. px — нет.

📊

WCAG 2.1 рекомендует rem для шрифтов: фиксированные px-размеры нарушают доступность для слабовидящих.

🌟

Tailwind CSS использует rem по умолчанию: p-4 = 1rem = 16px, text-lg = 1.125rem = 18px.

⚡

Границы и тени лучше оставлять в px: border: 1px solid — пользователь не хочет, чтобы рамка увеличивалась вместе со шрифтом.

🧠

Safari на iOS игнорирует font-size менее 16px в input — это вызывает автоматический зум формы. Используйте минимум 1rem для input.

PX, REM, EM — сравнение CSS-единиц измерения

Характеристика	PX (пиксели)	REM	EM
Относительность	Фиксированная	Относительно root	Относительно родителя
Масштабируемость	Нет	Да, от корневого элемента	Да, от родителя (каскадно)
Доступность (a11y)	Плохая	Отличная	Хорошая
Предсказуемость	Высокая	Высокая	Низкая (каскад)
Лучшее применение	Бордеры, тени, иконки	Типографика, отступы, размеры	Компонентная типографика

💡

Не всё нужно переводить в rem

Шрифты и отступы — в rem (масштабируются с базовым шрифтом). Границы, тени и медиа-запросы — в px (не должны масштабироваться). Это баланс доступности и визуальной стабильности.

Как перевести PX в REM — пошаговая инструкция

Введите значение в пикселях

Укажите количество пикселей (px), которое вы хотите перевести в rem. Конвертер автоматически рассчитает результат в реальном времени — нажимать кнопку не нужно. Поддерживаются дробные значения, например 14.5px.

Настройте базовый размер шрифта (при необходимости)

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

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

Готовое rem-значение можно скопировать одним кликом. Для удобства доступен CSS-сниппет с комментарием исходного значения в пикселях. В пакетном режиме можно скопировать все результаты сразу в формате только rem, таблицы PX = REM или CSS-комментариев.

Примеры перевода PX в REM на практике

📐 Вёрстка адаптивного макета из Figma

Дизайнер передал макет с размерами в пикселях: заголовок 32px, подзаголовок 24px, основной текст 16px, подпись 12px. Через пакетный режим конвертера все четыре значения мгновенно переводятся в rem: 2rem, 1.5rem, 1rem, 0.75rem. Копируем одним кликом и вставляем в CSS-файл. Вместо ручного деления каждого значения на 16 — получаем результат за секунды.

🎯 Создание типографической шкалы

При проектировании дизайн-системы нужна последовательная шкала размеров. Вводим в пакетный режим базовые размеры: 10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 48, 64 пикселей. Получаем полную rem-шкалу, которую можно использовать как CSS-переменные или токены дизайн-системы. Справочная таблица внизу калькулятора также помогает быстро подобрать нужное соответствие.

⚙️ Миграция проекта с PX на REM

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

🔧 Настройка базового размера 10px для удобства расчётов

Некоторые разработчики используют приём html { font-size: 62.5% }, что устанавливает базовый размер 10px вместо 16px. Это упрощает пересчёт: 1rem = 10px, 1.4rem = 14px, 2rem = 20px. В настройках конвертера измените базовый размер на 10px, и справочная таблица автоматически пересчитается с учётом нового значения.

Частые вопросы о переводе PX в REM

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

REM (root em) — это относительная единица измерения в CSS, которая вычисляется относительно размера шрифта корневого элемента (html). По умолчанию 1rem равен 16 пикселям. Главное отличие от px в том, что rem масштабируется при изменении пользователем настроек размера шрифта в браузере, а пиксели остаются фиксированными. Это делает rem предпочтительной единицей для типографики, отступов и размеров элементов в адаптивной и доступной вёрстке.

Как рассчитать rem из пикселей? Какая формула?

Формула перевода пикселей в rem: REM = PX / базовый размер шрифта. При стандартном базовом размере 16px: rem = px / 16. Примеры: 24px / 16 = 1.5rem, 14px / 16 = 0.875rem, 32px / 16 = 2rem. Если в проекте установлен другой базовый размер (например, html { font-size: 10px }), используйте это значение вместо 16. Наш конвертер автоматически применяет указанный базовый размер.

Зачем использовать rem вместо пикселей?

Использование rem вместо пикселей решает три задачи. Во-первых, доступность: сайт корректно масштабируется для пользователей, увеличивших размер шрифта в настройках браузера (WCAG-требования). Во-вторых, адаптивность: достаточно изменить font-size у html-элемента в медиа-запросе, и все rem-значения на странице пропорционально пересчитаются. В-третьих, единообразие и предсказуемость: rem всегда привязан к корневому элементу (в отличие от em, который каскадно наследует размер от родителя).

Какой базовый размер шрифта использовать — 16px или 10px?

Стандартный базовый размер 16px — значение по умолчанию во всех браузерах. Многие разработчики используют приём html { font-size: 62.5% }, что устанавливает базовый размер 10px и делает пересчёт нагляднее: 1.4rem = 14px, 1.6rem = 16px. Оба подхода допустимы, главное — не задавать html { font-size: 10px } в абсолютных единицах, иначе сломается масштабирование для пользователей с изменёнными настройками шрифта. Используйте проценты: 62.5% для базы 10px, 100% (или без указания) для 16px.

Когда лучше оставить пиксели, а не переводить в rem?

Пиксели уместны для свойств, которые не должны масштабироваться при изменении размера шрифта: border-width (толщина границ), box-shadow (тени), outline, а также для мелких декоративных элементов и иконок фиксированного размера. Медиа-запросы (media queries) также чаще пишут в px или em. Для всего остального — font-size, padding, margin, width, height, gap, line-height — рекомендуется использовать rem.

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

Единица rem вычисляется относительно размера шрифта корневого элемента html и одинакова для всех элементов страницы. Единица em вычисляется относительно размера шрифта ближайшего родительского элемента и может каскадно изменяться: если вложить несколько элементов с font-size: 1.2em, каждый уровень будет на 20% больше предыдущего. Из-за этого rem предсказуемее и проще в использовании. Em полезен внутри компонентов, где размеры должны масштабироваться пропорционально размеру текста самого компонента.

Как rem используется в Tailwind CSS и других фреймворках?

Tailwind CSS использует rem в качестве основной единицы для всех утилит размеров и отступов. Например, класс text-base равен 1rem (16px), p-4 — это padding 1rem. Bootstrap, Material UI и другие популярные CSS-фреймворки также базируются на rem для типографики и отступов. Это обеспечивает согласованное масштабирование всех элементов интерфейса. Наш конвертер помогает быстро находить соответствия между пиксельными значениями из макета и rem-единицами фреймворка.

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

Не задавайте html { font-size } в абсолютных пикселях — используйте проценты (100% = 16px, 62.5% = 10px), чтобы сохранить пользовательские настройки масштабирования

Используйте rem для font-size, padding, margin, gap и width — но оставляйте пиксели для border-width и box-shadow

Для адаптивной типографики меняйте font-size корневого элемента в media queries — все rem-значения автоматически пересчитаются

Создайте CSS-переменные с rem-значениями для повторяющихся размеров: --spacing-sm: 0.5rem, --spacing-md: 1rem

В пакетном режиме конвертера удобно пересчитывать все значения из дизайн-макета одним действием

Используйте визуальный предпросмотр конвертера для наглядной проверки размеров текста

Line-height рекомендуется задавать безразмерным числом (1.5), а не в rem или px

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

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

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

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