Перейти к содержимому
🛠️
Whiz Tools

Конвертер PX в REM и EM – Бесплатный CSS калькулятор единиц

Мгновенное преобразование пикселей в единицы REM и EM. Бесплатный конвертер единиц CSS для адаптивного веб-дизайна. Поддерживает пользовательские размеры шрифтов и расчеты в реальном времени для точных результатов.

Конвертер единиц PX, REM и EM

Конвертируйте между пикселями (PX), корневым em (REM) и em (EM). Введите значение в любое поле, чтобы увидеть эквивалентные значения в других единицах.

px
px
px
rem
em
Визуализация недоступна для отрицательных или нулевых значений

Формулы преобразования

  • PX в REM: значение в px ÷ корневой размер шрифта
  • PX в EM: значение в px ÷ размер шрифта родительского элемента
  • REM в PX: значение в rem × корневой размер шрифта
  • EM в PX: значение в em × размер шрифта родительского элемента
Калькулятор загрузки...
📚

Документация

Конвертер единиц PX, REM и EM

Конвертер px в rem и em преобразует длину CSS из пикселей (px) в rem и em и обратно, используя размер шрифта корневого элемента и размер шрифта родительского элемента, заданные пользователем. Эти три единицы чаще всего используются для задания размеров текста и интервалов в CSS — языке, применяемом для оформления веб-страниц.

Что такое px, rem и em?

Пиксель (px) — фиксированная единица измерения. Ширина блока, заданная как 200px, остаётся равной 200px независимо от размера шрифта на странице.

rem («корневой em») — единица, масштабируемая относительно размера шрифта корневого элемента страницы, обычно тега <html>. Большинство браузеров устанавливают размер шрифта корневого элемента равным 16px, если сайт не изменяет это значение. Если размер шрифта корневого элемента равен 16px, то 1rem равно 16px.

em — единица, масштабируемая относительно размера шрифта родительского элемента, то есть элемента, который её содержит. Если размер шрифта родительского элемента задан как font-size: 20px, то 1em внутри этого элемента равно 20px.

Главное различие между rem и em заключается в том, относительно чего они вычисляются. Rem всегда ориентируется на корневой элемент. Значение em зависит от ближайшего родительского элемента, поэтому оно может меняться на каждом уровне вложенности.

Как вычислять px в rem

Чтобы преобразовать пиксели в rem, разделите значение в пикселях на размер шрифта корневого элемента:

r=pRr = \frac{p}{R}

где r — длина в rem, p — длина в пикселях, а R — корневой размер шрифта в пикселях.

Пример расчёта

При стандартном размере шрифта корневого элемента 16px значение 24px преобразуется так:

24 ÷ 16 = 1,5rem

Если сайт задаёт размер шрифта корневого элемента равным 10px (распространённый приём с использованием html { font-size: 62.5%; }, поскольку 62,5 % от 16px составляет 10px), то то же значение 24px преобразуется так:

24 ÷ 10 = 2,4rem

Как вычислять rem в px

Для обратного преобразования умножьте значение rem на размер шрифта корневого элемента:

p=r×Rp = r \times R

где p — длина в пикселях, r — длина в rem, а R — корневой размер шрифта.

При корневом размере 16px значение 1.5rem преобразуется обратно так: 1,5 × 16 = 24px.

Как вычислять px в em

Чтобы преобразовать пиксели в em, разделите значение в пикселях на размер шрифта родительского элемента:

e=pPe = \frac{p}{P}

где e — длина в em, а P — размер шрифта родительского элемента в пикселях.

Пример расчёта

Если размер шрифта родительского элемента равен 20px, то значение 24px преобразуется так:

24 ÷ 20 = 1,2em

Как вычислять em в px

Умножьте значение em на размер шрифта родительского элемента:

p=e×Pp = e \times P

где p — длина в пикселях, e — длина в em, а P — размер шрифта родительского элемента.

При родительском размере 20px значение 1.2em преобразуется обратно так: 1,2 × 20 = 24px.

Как вычислять rem в em и em в rem

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

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

где R — корневой размер шрифта, а P — размер шрифта родительского элемента.

Пример расчёта

При размере шрифта корневого элемента 16px и размере шрифта родительского элемента 20px значение 2rem преобразуется так:

2 × (16 ÷ 20) = 1,6em

Если размеры шрифта корневого и родительского элементов одинаковы, 1rem всегда равно 1em.

Когда полезна каждая единица

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

Rem часто используют для интервалов и типографики, которые должны оставаться единообразными на всей странице. Поскольку rem всегда относится к размеру шрифта корневого элемента, его значение не меняется независимо от глубины вложенности элемента. Это также означает, что макеты на основе rem автоматически подстраиваются, когда пользователь увеличивает стандартный размер шрифта в браузере, что помогает людям со слабым зрением.

Em хорошо подходит внутри отдельного самостоятельного компонента, например кнопки, где внутренние отступы должны масштабироваться вместе с размером шрифта самой кнопки. Распространённая проблема em заключается в накоплении эффекта: если несколько вложенных элементов используют font-size: 1.2em, каждый уровень умножает значение предыдущего, поэтому размер шрифта растёт быстрее, чем предполагалось.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

После трёх уровней текст увеличивается примерно на 73 %, а не на 20 %, как разработчик мог бы ожидать от одного правила 1.2em.

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

  1. Введите значение в поле пикселей, rem или em.
  2. Два других поля обновятся автоматически; значения будут округлены до четырёх знаков после запятой.
  3. Установите размер шрифта корневого элемента в соответствии с элементом <html> проекта. По умолчанию в большинстве браузеров он равен 16px и влияет только на rem.
  4. Установите размер шрифта родительского элемента в соответствии с размером шрифта элемента, внутри которого находилось бы значение em. Он влияет только на em.
  5. Нажмите кнопку копирования рядом с полем, чтобы скопировать его значение.

Оба поля размера шрифта принимают целое число пикселей; минимальное допустимое значение — 1px. Кнопка сброса очищает значение и возвращает оба размера шрифта к значению 16px.

Под полями инструмент рисует по одной полосе для каждой единицы. Все три полосы обозначают одну и ту же физическую длину, поэтому имеют одинаковую ширину; это позволяет быстро проверить правильность преобразования. Полоса отображается в истинном размере до 300px; более длинные значения масштабируются, чтобы поместиться, поэтому значения 600px и 900px заканчиваются на отметке 300px. Полосы отображаются только при значении в пикселях больше нуля.

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

В чём разница между rem и em? Rem всегда относится к размеру шрифта корневого элемента. Em относится к размеру шрифта ближайшего родительского элемента. Значение rem остаётся одинаковым в любом месте страницы, а значение em может меняться в зависимости от глубины вложенности элемента.

Почему браузеры используют 16px как стандартный размер шрифта? 16px давно является стандартным размером текста в основных браузерах, поскольку его удобно читать на обычных экранах без дополнительного оформления. Рекомендации по доступности веб-содержимого предусматривают возможность увеличения текста до 200 % без нарушения макета страницы, и 16px — практичная исходная величина для этого.

Что такое приём 62,5 %? Задание html { font-size: 62.5%; } превращает стандартный размер шрифта корневого элемента 16px в 10px, поскольку 62,5 % от 16 равно 10. Это упрощает вычисления rem, поскольку 1,6rem равно 16px, а 2,4rem равно 24px.

Могут ли значения px, rem и em быть отрицательными? Да, для свойств, допускающих отрицательные длины, например для внешних отступов или CSS-трансформаций. В CSS внутренние отступы не могут быть отрицательными: браузеры игнорируют отрицательное значение внутреннего отступа. Конвертер обрабатывает отрицательные значения, но не рисует для них полосы, поскольку ширина полосы не может быть отрицательной.

Нужно ли преобразовывать каждое значение в пикселях в rem? Не обязательно. Границы и другие тонкие детали обычно задают в пикселях, поскольку их редко требуется масштабировать вместе с размером шрифта, а при дробной ширине в пикселях они могут выглядеть неровными. Rem подходит для интервалов и типографики, которые должны масштабироваться в соответствии с предпочтительным размером шрифта пользователя.

Влияет ли выбор единицы на производительность страницы? Нет. Во время компоновки браузеры преобразуют каждую длину CSS в одно и то же внутреннее значение, поэтому px, rem и em отображаются с одинаковой скоростью. Выбор между ними влияет на удобство сопровождения и доступность, но не на скорость.