Как перевести px в rem, em и проценты

Зачем менять единицу

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

Конвертер единиц CSS закрывает обе задачи: одно число сразу в px, rem, em и %, и целый блок CSS из одной единицы в другую. Базовый размер шрифта задаёте вы. Обычное значение браузера — 16px.

Шаг за шагом

Откройте конвертер единиц CSS. Первая вкладка называется по базе, 16px. Кнопки 16px, 14px, 18px и 20px меняют эту базу. Если в дизайн-системе другое число, впишите его в поле.
Останьтесь в режиме «Конвертер единиц». Введите значение и выберите единицу. При базе 16px число 24 в px даёт 24px, 1.5rem, 1.5em и 150%. Округление стоит на 4 знаках, поэтому карточки показывают 1.5000rem. У каждой карточки своя кнопка «Копировать».

Конвертер единиц: база 16px, ввод 24px, результат 24px, 1.5rem, 1.5em и 150%
В этом режиме и rem, и em делятся на заданную базу. Родительское правило здесь не читается. Это делает следующий режим.
Откройте «Конвертер CSS кода». Оставьте «Из» на px и «В» на rem и вставьте блок карточки из следующего раздела. При базе 16px на выходе будет 1rem, 1.5rem, 0.5rem, 1.25rem и 0.75rem.

Конвертер CSS-кода переводит блок из px в rem, сверху жёлтое предупреждение о вложенности
Скопируйте результат и проверьте его. Жёлтая плашка на странице не для вида: медиазапросы и селекторы, которые инструмент не разобрал, могут остаться неверными.

Блок со скриншота

.card {
  font-size: 16px;
  padding: 24px;
  margin: 8px;
}
.card .title {
  font-size: 20px;
  margin-bottom: 12px;
}

Отступ 24px становится 1.5rem. Заголовок в 20px становится 1.25rem. Поле 8px становится 0.5rem, а 12px — 0.75rem.

Советы

Сначала задайте базу. 24px равны 1.5rem только при базе 16px. При 18px те же 24px станут 1.3333rem.
Держите вкладку на проект. «Добавить таб» сохраняет другую базу. Вкладки, режим и округление остаются в local storage браузера.
Берите rem для текста, который должен слушаться читателя. Отступы, которые тоже идут от корня, логично писать в rem.
Берите em, когда отступ принадлежит компоненту. В конвертере кода em смотрит на font-size, который инструмент видит у этого правила. В таблице единиц em просто берёт базу.
Не прогоняйте огромную таблицу стилей вслепую. Конвертируйте компонент, прочитайте выход и только потом вставляйте его обратно.

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

Какую базу ставить?

16px, если макет не говорит иначе. Это обычное значение браузера. Кнопки закрывают 14px, 18px и 20px.

Почему в таблице rem и em совпали?

Таблица переводит обе единицы от базы, которую вы ввели. Родительский селектор она не смотрит. Вложенный em считается в «Конвертере CSS кода».

24px всегда равно 1.5rem?

Только при базе 16px. Смените базу — четыре карточки пересчитаются сразу.

Любая таблица стилей переведётся чисто?

Нет. Конвертер предупреждает, что сложные селекторы, медиазапросы и часть вложенности могут выйти неверно. Прочитайте результат, прежде чем отправлять его в проект.

Другие инструменты

Конвертер единиц CSS: инструмент из этого гайда.
SVG в CSS: положить SVG-иконку в правило background.
Favicon Generator: собрать иконки сайта из одной картинки.
Веб-инструменты: остальные сервисы категории.

Попробовать

Откройте конвертер единиц CSS, оставьте базу 16px и введите 24.