nicetool.dev logo

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

Вводите в любое поле. Щёлкните строку таблицы, чтобы подставить значение, или вставьте CSS ниже для полной конвертации.

24px = 1.5rem = 18pt = 150%

Таблица перевода (база 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

Перевести фрагмент CSS

Переведено 6 значений
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

Чем отличаются px и rem?

px фиксированная единица CSS, а 1rem равен размеру шрифта корневого элемента html, по умолчанию 16px во всех браузерах. Если задавать текст, отступы и раскладку в rem, всё масштабируется вместе, когда пользователь увеличивает размер шрифта в настройках браузера, а это важное требование доступности (WCAG 1.4.4, изменение размера текста). Формула простая: rem = px / корневой размер, поэтому при базе 16px 24px равны 1,5rem. em работает так же, но относительно шрифта родителя и накапливается при вложенности.

Возможности

  • • Перевод px и rem в обе стороны с настраиваемым корневым размером
  • • Показывает также эквиваленты в pt и процентах
  • • Кликабельная таблица популярных размеров от 1px до 128px
  • • Массовая замена всех px во фрагменте CSS
  • • Опция оставить тонкие рамки 1px в px

Работает локально

Все вычисления происходят в браузере, включая вставленный CSS. Ничего не загружается.

Мгновенный расчёт, 100% на стороне клиента.

Как пользоваться: PX в REM

  1. 1

    Проверьте корневой размер шрифта: оставьте 16px, если проект не задаёт иной html { font-size }, например 10px или 62,5%.

  2. 2

    Введите значение в поле px, чтобы получить rem, или в поле rem, чтобы получить px. Строка ниже показывает также pt и проценты.

  3. 3

    Щёлкните любую строку таблицы, чтобы подставить популярный размер от 1px до 128px.

  4. 4

    Вставьте блок CSS в массовый конвертер: все px станут rem, 0px станет 0, а рамки 1px можно оставить в px. Скопируйте результат в таблицу стилей.

Практические примеры

Типографическая шкала

Шкала 14 / 16 / 20 / 24 / 32px превращается в 0,875 / 1 / 1,25 / 1,5 / 2rem, и заголовки растут, когда пользователь увеличивает текст в браузере.

Перевод старой таблицы стилей

Вставьте старый CSS в px, переведите отступы, поля и размеры шрифта за раз, затем проверьте медиазапросы и оставьте тонкие рамки в px.

Соответствие макету Figma

Дизайнеры передают размеры в px. Переведите токены отступов 4, 8, 12, 16 и 24px в 0,25, 0,5, 0,75, 1 и 1,5rem для дизайн-системы.

Приём с 62,5%

Некоторые проекты задают html { font-size: 62.5% }, чтобы 1rem = 10px. Укажите корневой размер 10, и 24px станут удобными 2,4rem.

Частые вопросы

Использовать rem или px?+

Задавайте в rem размеры шрифта и большинство отступов, чтобы раскладка учитывала настройку шрифта пользователя. px по-прежнему подходят для рамок, теней и мелких деталей.

Чем rem отличается от em?+

rem зависит от размера шрифта корневого html и предсказуем. em зависит от родителя, поэтому вложенные em перемножаются: удобно в компонентах, но легко ошибиться.

База всегда 16px?+

Это значение по умолчанию во всех браузерах, но пользователь может его изменить, а ваш CSS переопределить на html. Всегда считайте от корневого размера, который реально используется в проекте.

Нужны ли rem в медиазапросах?+

Медиазапросы в em или rem считаются от шрифта браузера по умолчанию, а не от вашего правила html, и подстраиваются при увеличении текста. Поэтому многие команды используют в них em.