Softonic

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

Шаг 1 / 2 рем
Результаты

Дизайнер присылает вам макет из Figma в пикселях, кодовая база работает на rem, а половина компонентов написана на em в тех местах, где значение меняется в зависимости от размера шрифта родительского элемента. Этот конвертер вычисляет эквиваленты в px и rem для любого значения em при любом корневом размере шрифта, поэтому вы можете скопировать нужное число прямо в CSS-файл, не пересчитывая его в уме каждый раз.

Как преобразовать em, rem и пиксели

  1. 1

    Задайте базовый размер шрифта

    Обычно это 16px, значение браузера по умолчанию. Некоторые дизайн-системы используют в качестве корневого 14px или 18px.

  2. 2

    Для em задайте размер шрифта родителя

    em отсчитывается относительно родительского элемента. Если родитель равен 20px, то 1em равен 20px.

  3. 3

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

    В em; эквиваленты в px и rem обновятся автоматически.

  4. 4

    Прочитайте результат преобразования

    Значения px, em и rem показываются как в округлённом виде, так и с точными десятичными знаками.

Формулы

rem всегда отсчитывается относительно корневого элемента (<html>):

px = rem * root_font_size rem = px / root_font_size

em отсчитывается относительно родителя текущего элемента:

px = em * parent_font_size em = px / parent_font_size

Преобразования при корне 16px

Пиксели rem em (при родителе 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Когда что использовать

  • px: границы, мелкие детали, точный контроль. Тень 1px, граница 1px.
  • rem: внешние отступы, внутренние отступы и типографика, которые должны масштабироваться вместе с настройкой шрифта пользователя.
  • em: локальные отступы внутри компонента, подстраивающиеся под его собственный размер шрифта (кнопки, бейджи).
  • % и vw/vh: относительно контейнера и относительно области просмотра, это отдельная тема.

Приём с 62,5%

В некоторых кодовых базах задают html { font-size: 62.5%; }, чтобы 1rem = 10px. Это упрощает расчёты в rem (24px = 2.4rem), но ценой того, что нарушается настройка размера шрифта в браузере у пользователей, которые увеличивают текст. Современная практика избегает этого приёма; используйте корень 16px и допускайте десятичные значения.

Ловушка наследования em

em наследуется по каскаду. Если у родительского элемента font-size равен 1.2em относительно его собственного родителя, а внутри вы задаёте padding в 1em, то отступ составит 1.2 × 1.2 = 1.44 × корень. Вложенные em перемножаются, что может давать неожиданные результаты. rem избегает этого, потому что всегда вычисляется относительно <html>.

Пример типографической шкалы

Распространённая модульная шкала с коэффициентом 1.25:

Уровень rem px (при корне 16)
Подпись 0.75 12
Основной текст 1 16
Основной текст+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Заголовок-акцент 3.052 ~49

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

Уважение к настройкам пользователя

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

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

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

Пользователи могут изменить размер шрифта браузера по умолчанию. В Chrome по умолчанию 16px; если пользователь установил 18px, все ваши значения rem станут на 12,5 процента крупнее. Дизайнеры, исходящие из фиксированного корня 16px, часто упускают это из виду; rem уважает выбор пользователя, в этом и весь смысл.

Шкала отступов Tailwind использует rem. По умолчанию text-base, это 1rem = 16px, а text-lg, 1.125rem. Шкала единообразна и по умолчанию учитывает корневой размер шрифта.

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

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Инструмент доступен на других языках