Что такое конвертер EM в PX?
Конвертер EM в PX переводит относительные единицы CSS em в абсолютные пиксели. В CSS em — это относительная величина: 1em равен размеру шрифта родительского элемента (а для свойств, не связанных со шрифтом, — размеру шрифта самого элемента). Поскольку браузеры по умолчанию используют корневой размер шрифта 16px, 1em обычно равен 16px. Но точное значение зависит от того, какой базовый размер шрифта вы зададите.
Как пользоваться
Введите значение в em, которое нужно перевести, затем укажите базовый размер шрифта в пикселях. Большинство браузеров по умолчанию используют 16px, поэтому это значение уже подставлено. Нажмите «Рассчитать», чтобы увидеть результат в пикселях. Это удобно, когда нужно сопоставить макет, заданный дизайнером в пикселях, со стилями, написанными в em.
Разбор формулы
Перевод сводится к простому умножению:
$$\text{PX} = \text{EM value} \times \text{Base font size (px)}$$
Например, 1.5em при базе 16px дают \(1.5 \times 16 = 24\text{px}\). Чтобы выполнить обратный перевод, разделите пиксели на базу: \(\text{px} \div \text{база} = \text{em}\).
Пример расчёта
Допустим, для заголовка задано 2.5em, а базовый размер шрифта — 16px. Тогда размер в пикселях равен \(2.5 \times 16 = 40\text{px}\). Если бы база составляла 18px, те же 2.5em отрисовались бы как \(2.5 \times 18 = 45\text{px}\) — это наглядно показывает, как em масштабируется вместе с базой.
Частые вопросы
Всегда ли 1em равен 16px? Только когда базовый размер шрифта совпадает с браузерным значением по умолчанию — 16px. Если размер шрифта родителя или корневого элемента отличается, 1em меняется соответственно.
Чем em отличается от rem? rem всегда отсчитывается от размера шрифта корневого элемента (html), тогда как em зависит от ближайшего контекста размера шрифта, который может наследоваться и накапливаться.
Зачем использовать em вместо px? Единицы em масштабируются вместе с пользовательскими настройками размера шрифта, что повышает доступность и упрощает поддержку адаптивной типографики.
