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

Конвертер PX в REM преобразует значения в пикселях в единицы rem или em — и обратно — используя фактический размер шрифта корневого элемента вашего проекта. Вставьте одно значение или целую типографическую шкалу и получите преобразованные числа, готовый к копированию блок CSS с исходными пикселями в комментариях, линейку, отображающую каждый размер в настоящем масштабе, и предпросмотр того, как ваши значения rem реагируют на увеличение посетителем размера шрифта браузера.

Формула конвертации PX в REM

Конвертация между пикселями и rem выполняется одним делением — нужно знать только размер шрифта корневого элемента документа.

При стандартном размере корневого элемента браузера 16 px получаем 24px ÷ 16 = 1.5rem и 1.5rem × 16 = 24px. Если таблица стилей задаёт html { font-size: 62.5%; }, корневой размер становится равен 10 px, а те же 24 px — это 2.4rem.

Таблица конвертации PX в REM (корень 16px)

rem и em: почему вложенность всё меняет

rem вычисляется относительно корневого элемента (html), поэтому означает одно и то же везде в документе. em вычисляется относительно вычисленного размера шрифта родительского элемента, поэтому одинаковые значения em перемножаются при вложенности. На этой диаграмме один и тот же множитель 1.5 применяется на трёх уровнях, начиная с корневого размера 16 px:

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

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

• Доступность. Посетитель, установивший стандартный размер шрифта браузера 20 px, увидит пропорциональное увеличение всех размеров на основе rem. Размеры, жёстко заданные в px, полностью игнорируют это предпочтение.
• Один регулятор глобального масштабирования. Измените размер шрифта корневого элемента в медиазапросе, и вся типографическая шкала и ритм интервалов изменятся вместе — без отдельных переопределений для компонентов.
• Согласованный ритм интервалов. Задание внутренних и внешних отступов в rem сохраняет вертикальный ритм связанным с типографической шкалой, а не позволяет ему постепенно расходиться.
• Удобство дизайн-токенов. Современные дизайн-системы (и стандартная шкала Tailwind) публикуют размеры в rem, поэтому конвертация существующих значений px упрощает передачу макета.

Приём с размером шрифта корневого элемента 62.5%

Многие команды добавляют это правило, чтобы 1rem равнялся аккуратным 10 px и вычисления в уме становились простыми:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* снова читаемый размер 16px */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Поскольку 62.5% — это процент от стандартного значения браузера, а не фиксированное значение в пикселях, он по-прежнему учитывает предпочтение посетителя относительно размера шрифта. Важно не забыть вернуть для body примерно 1.6rem, иначе стандартный текст будет иметь размер 10 px. Установите в поле размера шрифта корневого элемента выше значение 10, чтобы конвертировать данные с такой настройкой.

rem в медиазапросах

В медиазапросе rem вычисляется относительно исходного размера шрифта корневого элемента браузера — а не размера шрифта html, заданного в CSS. Поэтому @media (min-width: 48rem) всегда равно 768 px, даже если таблица стилей объявляет html { font-size: 10px }. Это делает точки останова в rem безопасными и предсказуемыми; это также одно из немногих мест, где em и rem ведут себя одинаково.

Когда всё же следует использовать px

• Тонкие границы и разделители — граница толщиной 1 px должна оставаться равной 1 px; её масштабирование создаёт размытые субпиксельные линии.
• Изображения фиксированного размера — смещения спрайтов, точные смещения теней и изображения с известным исходным размером.
• Canvas и печатный вывод — когда физический размер или размер в пикселях устройства действительно соответствует вашей задумке.

Как использовать этот конвертер

1. Выберите направление: px → rem, rem → px, px → em или em → px.
2. Введите значения: одно число или целую шкалу, разделённую запятыми или пробелами (до 20 значений за раз). Конечные единицы, например 24px, принимаются и игнорируются.
3. Задайте размер шрифта корневого элемента: оставьте 16 для стандартных настроек браузера или выберите предустановку 10 (приём 62.5%), 12, 14, 18 или 20.
4. Нажмите «Конвертировать»: изучите таблицу результатов, линейку размеров в настоящем масштабе, предпросмотр доступности и блок CSS.
5. Скопируйте CSS: одна кнопка копирует все объявления font-size, сохраняя исходное значение в пикселях в комментарии.

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

Как конвертировать px в rem?

Разделите значение в пикселях на размер шрифта корневого элемента. При стандартном размере корневого элемента браузера 16 px: 24 px ÷ 16 = 1.5rem. Для обратной конвертации умножьте значение rem на размер шрифта корневого элемента: 1.5rem × 16 = 24 px.

Сколько px содержит 1rem?

1rem равно размеру шрифта корневого элемента страницы. Во всех основных браузерах по умолчанию это 16 px, поэтому 1rem — это 16 px, если элемент html или настройки браузера посетителя не изменяют его.

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

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

Что такое приём задания размера шрифта корневого элемента 62.5%?

Правило html { font-size: 62.5%; } делает корневой размер равным 10 px вместо 16 px, поэтому 1rem равен 10 px, а вычисления становятся простыми: 24 px — это 2.4rem. Масштабирование по-прежнему учитывает предпочтение посетителя относительно размера шрифта браузера, потому что 62.5% — относительное, а не абсолютное значение в пикселях.

Стоит ли использовать px или rem для размеров шрифта?

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

Должны ли значения rem быть целыми?

Нет. Браузеры без проблем обрабатывают дробные значения rem и вычисляют размеры субпикселей внутри. Если вам нравятся аккуратные числа, выберите размер шрифта корневого элемента, который равномерно делит вашу шкалу, например 10 px или 8 px, либо используйте параметр точности знаков после запятой этого конвертера.

Работает ли rem для padding, margin и медиазапросов?

Да. rem допустим везде, где CSS принимает длину, включая padding, margin, width, gap и border-radius. В медиазапросах rem вычисляется относительно исходного корневого размера 16 px, а не вашего пользовательского размера шрифта html, поэтому точка останова 48rem всегда равна 768 px.

Дополнительные ресурсы

• Единицы длины CSS — MDN
• Относительные к шрифту длины — CSS Values W3C