Калькулятор PX в REM | Таблица конвертации и перевода CSS

Конвертируйте PX в REM или REM обратно в PX для CSS и UI-дизайна. Изменяйте базовый размер шрифта, используйте живую таблицу конвертации и проверяйте ближайшие токены отступов Tailwind.

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

rem = px / root font-size

пикселей
Общие базовые размеры
px
rem

Таблица конвертации

PXREMБлижайший Tailwind
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

Как использовать

  1. Подтвердите html font-size вашего проекта в поле «Базовый размер». Обычным значением по умолчанию является 16px.
  2. Введите значение из дизайна, например 24, в поле PX.
  3. Поле REM мгновенно обновится до 1.5rem; вы также можете ввести 2rem, чтобы получить 32px.
  4. Используйте таблицу ниже для обычных размеров шрифтов, значений отступов и справочника по интервалам Tailwind.

Основные функции

  • Мгновенная двусторонняя конвертация: Введите PX или REM и сразу получите противоположное значение без кнопки расчета.
  • Настраиваемый базовый размер шрифта: Начните с 16px или переключитесь на 10px, 14px или любой другой корневой размер для конкретного проекта.
  • Встроенная шпаргалка: Общие размеры обновляются вместе с базовым размером, включая эквиваленты 12px, 16px, 24px и 32px.
  • Справочник по интервалам Tailwind: Смотрите общие токены интервалов Tailwind для соответствующих пиксельных значений.
  • Локально и быстро: Все расчеты выполняются в памяти браузера без сетевых запросов.

Похожие инструменты

Минификатор и форматер CSS - Сжатие и статистика

Локально минифицируйте или форматируйте CSS без загрузки на сервер. Удаляйте комментарии и пробелы, просматривайте статистику сжатия или делайте код читаемым. Скопируйте результат.
Безопасное форматирование JSON и генерация типов - Работает локально

Безопасный JSON-форматтер: форматируйте, проверяйте и исправляйте JSON локально. Улучшение читаемости/минификация, подсветка ошибок, генерация TypeScript или Zod, конвертация в XML — приватно. Попробуйте сейчас.
Бесплатный тестер и анализатор JSONPath | Локальные запросы в реальном времени

Бесплатный тестер и анализатор JSONPath для JSON из API. Извлекайте совпадающие узлы в реальном времени, проверяйте пути и копируйте результаты JSON, пока парсинг остается локальным в вашем браузере.
Конвертер JSON в CSV - Локальный экспорт в таблицы

Конвертируйте объекты или массивы JSON в CSV локально в вашем браузере. Выравнивайте вложенные поля, просматривайте результат, а затем копируйте или скачивайте CSV без загрузки данных на сервер.
Конвертер CSV в JSON - Локальный парсер в реальном времени

Конвертируйте текст или файлы CSV в массивы JSON локально в вашем браузере. Поддерживает заголовки, разделители (запятая/точка с запятой/табуляция), перетаскивание файлов, копирование и скачивание без загрузки на сервер.
Инструмент сравнения JSON - Локальный семантический Diff

Локально сравнивайте два JSON-документа в браузере. Сортируйте ключи объектов для семантического сравнения (semantic diff), игнорируйте различия в порядке следования ключей и отмечайте добавленные, удаленные и измененные поля без загрузки на сервер.
Минификатор и компрессор JSON

Сжимайте JSON в одну строку, удаляйте отступы и переносы строк, а также сравнивайте исходный размер, сжатый размер, сэкономленные байты и процент сжатия.
JSON в TypeScript - Онлайн-генератор TS Types

Бесплатный инструмент для конвертации JSON в TypeScript. Мгновенно генерируйте интерфейсы и типы TypeScript из ваших JSON-данных. 100% приватная генерация кода на стороне клиента.

Логика расчёта

  • Формула PX в REM: REM = PX / Base Size.
  • Формула REM в PX: PX = REM × Base Size.
  • При базовом размере корня браузера по умолчанию 16px = 1rem и 24px = 1.5rem.

Часто задаваемые вопросы

Сколько пикселей в 1rem?

В большинстве браузеров 1rem по умолчанию равен 16px. Если в вашем проекте изменяется html { font-size }, используйте этот корневой размер.

В чем разница между PX и REM?

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

Почему в некоторых проектах используется база 10px?

Некоторые команды устанавливают html { font-size: 62.5%; }, так что 1rem составляет около 10px, что облегчает вычисления в уме. Учтите доступность, прежде чем внедрять это.

Конвертирует ли это также EM?

Нет. Этот инструмент фокусируется на PX и REM. EM зависит от размера шрифта текущего элемента, поэтому его не следует рассматривать как идентичное преобразование.

Загружаются ли какие-либо данные CSS или дизайна на сервер?

Нет. Конвертация происходит локально в вашем браузере без серверных расчетов или загрузки файлов.