Что такое конвертер EM в PX?
EM и PX — две самые популярные единицы измерения в CSS, которые используют для задания размера текста, отступов и элементов макета. Пиксель (PX) — абсолютная единица, а EM измеряется относительно размера шрифта родительского элемента. Этот конвертер пересчитывает значения из одной единицы в другую, чтобы вы могли уверенно переключаться между фиксированными и масштабируемыми размерами при создании адаптивных сайтов.
Как пользоваться
Выберите направление пересчёта — из EM в PX или из PX в EM, — затем введите своё значение и базовый размер шрифта в пикселях. По умолчанию браузеры используют размер 16px, и это значение уже подставлено за вас. Нажмите «Рассчитать», чтобы сразу увидеть результат.
Разбираем формулу
Пересчёт строится на простой пропорции. Чтобы перевести EM в PX, нужно умножить: $$\text{px} = \text{em} \times \text{base}$$ Чтобы выполнить обратное действие — разделить: $$\text{em} = \dfrac{\text{px}}{\text{base}}$$ В роли base выступает тот размер шрифта (в пикселях), относительно которого считается значение в EM.
Пример расчёта
Допустим, нужно перевести 1.5em при базовом размере шрифта 16px. По формуле \(\text{px} = \text{em} \times \text{base}\): $$1.5 \times 16 = 24\,\text{px}$$ И наоборот: \(24 \div 16 = 1.5\,\text{em}\). А если базовый размер составит 20px, то 1.5em будет равно уже 30px.
Частые вопросы
Какой базовый размер шрифта выбрать? В большинстве браузеров по умолчанию используется 16px. Если вы изменили font-size у корневого или родительского элемента в CSS, укажите это значение.
EM и REM — это одно и то же? Нет. REM всегда измеряется относительно размера шрифта корневого элемента, а EM — относительно размера шрифта ближайшего родителя. Для пересчёта REM используйте в качестве базы корневой размер шрифта.
Зачем вообще нужны EM? Единицы EM масштабируются вместе с размером шрифта, благодаря чему макет становится доступнее и адаптивнее, когда пользователь меняет размер текста по умолчанию.
