Перевести em в px Em ↔ Pixels Бесплатно Онлайн Безопасно

Зачем конвертировать em в px

В таблице стилей у заголовка написано margin-bottom: 0.75em, у кнопки — padding: 0.4em 0.9em, а у блока текста — line-height: 1.3em. Это хорошие гибкие значения, и их почти невозможно представить. Сколько пикселей этот отступ? Совпадает ли внутренний отступ кнопки с 6 px и 14 px из файла макета? Чтобы узнать, вы конвертируете em в px: умножаете на размер шрифта, к которому относится em, и читаете ответ в единице, которой пользуются инструменты дизайна. Это вопрос, который разработчики задают, когда просматривают код, сверяют сборку с макетом, отлаживают проблему с отступами или передают готовый компонент тому, кто думает в пикселях.

Em — самая хитрая единица в CSS для конвертации, потому что у неё нет фиксированного значения. Em — это размер шрифта, действующий там, где используется значение, или, для самого свойства font-size, размер шрифта родителя. Поэтому 1,5 em может быть 24 px в одном месте и 36 px в другом, в той же таблице стилей, по тому же правилу. Конвертер поэтому не гадает. Он запрашивает размер шрифта, к которому относится em, показывает его рядом с ответом и считает с ним. Если вы не знаете размера, разделы ниже объясняют, как найти его в браузере.

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

Формула и база

px равно em, умноженному на размер шрифта

Формула — одно умножение: px = em × база. При базе 16 px значение 1,5 em становится 24 px, 0,75 em становится 12 px, а 2 em становится 32 px. Страница печатает базу рядом с результатом, поэтому строка вроде 1,5 em = 24 px (16 px) говорит ровно, что предполагалось. Если размер шрифта элемента — 20 px, введите 20, и 1,5 em станет 30 px.

Поиск базы в браузере

Откройте инструменты разработчика, выберите элемент и посмотрите на его вычисленный размер шрифта. Это число нужно ввести в поле базы для любого свойства, кроме font-size. Для самого font-size выберите родителя и прочтите вместо этого его вычисленный размер. Это занимает несколько секунд и полностью устраняет гадание.

Когда вы не видите страницу

Если вы читаете код без страницы, пройдите вверх по цепочке размеров шрифта от элемента: его собственный font-size, если он есть, иначе родительский, и так до корня, который равен 16 px, если таблица стилей или читатель не изменили его. Там, где размер задан в em, умножайте вдоль цепочки. Это утомительно, поэтому большинство команд останавливается на rem для размеров шрифта.

Что конвертация сохраняет, а чего не может

Она сохраняет пропорцию к тексту

Результат — размер в пикселях, который означает em при введённой вами базе. Записанные в em отступ или размер следуют за текстом, которому принадлежат, а конвертация показывает, что это даёт для одного конкретного размера текста.

Она не может дать один ответ для страницы

Вот на что нужно обратить внимание: em относителен размеру шрифта самого элемента или, для font-size, его родителя, а не корня. Поэтому те же 1,5 em — это 24 px внутри элемента в 16 px и 36 px внутри элемента в 24 px, а em внутри em умножается. Цифра на странице верна для базы в поле и больше ни для чего. Если вам нужно одно число, действующее везде, для этого и существует rem. Чтобы сравнить их, конвертировать rem в px и посмотрите, как единица, относительная корня, остаётся неизменной.

Округление

Умножение на целую базу даёт точные результаты для большинства значений. Если база десятичная, например 13,5 px, значение вроде 1,2 em даёт 16,2 px. Браузеры справляются с дробными пикселями, но когда нужны целые пиксели, для тонкой границы или значка на сетке, округляйте сознательно и проверяйте, как это выглядит.

Как умножаются вложенные значения em

Список внутри списка

Возьмите страницу, у которой основной текст — 16 px. У списка font-size: 0.875em, то есть 14 px. У элементов внутри него тоже font-size: 0.875em, то есть 14 × 0,875 = 12,25 px. Список внутри элемента делает это снова: 10,7 px. На трёх уровнях вглубь текст крошечный, и никто не решал, что так должно быть. Когда вы конвертируете em в px для компонента и ответ выглядит слишком малым, вложенность — первое, что нужно проверить.

Подъём по цепочке

Чтобы узнать истинный размер в пикселях вложенного em, умножайте базу на каждое значение по пути вниз: 16 × 0,875 × 0,875 = 12,25. Конвертер делает по одному шагу за раз. Для цепочки конвертируйте первое значение, используйте ответ как базу для второго и продолжайте. Это та же арифметика, которую выполняет браузер.

Как не дать им накапливаться

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

Типичные значения

Таблица внизу страницы

Страница включает таблицу значений в пикселях, которым соответствуют типичные значения em при заданной вами базе: 0,5 em — это 8 px, 0,625 — 10, 0,75 — 12, 0,875 — 14, 1 — 16, 1,125 — 18, 1,25 — 20, 1,5 — 24, 2 — 32, 3 — 48 и 4 — 64. При базе по умолчанию это те же числа, что и для rem. Измените базу, и таблица изменится вместе с ней, что хороший способ увидеть, что на самом деле делает em.

Попробуйте две базы рядом

Введите 1,5 при базе 14, а затем при базе 20. Вы получите 21 и 30 пикселей. В этом вся разница между em и rem в одном эксперименте: одна и та же цифра, два элемента, два размера.

Как конвертировать em в px здесь

Введите значение em

Введите размер в em в первое поле. Десятичные принимаются, поэтому 0,714 работает так же, как 1.

Задайте размер шрифта, к которому относится em

Введите размер шрифта элемента или его родителя, если свойство — font-size. Если не уверены, оставьте 16 и считайте результат приближением.

Прочтите значение в пикселях

Ответ появляется сразу, с базой, показанной рядом. Скопируйте его в заметки или сравните с файлом макета.

Откуда эти единицы

Em

Em старше веба. В металлическом наборе это была ширина литой кегли, названная по заглавной букве M, и типографы до сих пор говорят о длинных тире и пробелах em. В CSS это означает действующий размер шрифта, поэтому оно меняется по мере вложения элементов.

Пиксель и rem

Когда у дисплеев перестала быть предсказуемая плотность, страница, измеряемая в настоящих пикселях, стала страницей, сжимающейся по мере того, как экраны становились чётче. Поэтому CSS-пиксель был переопределён как эталонная длина: около 1/96 дюйма при взгляде с удобного для чтения расстояния. Rem добавили, чтобы избежать накопления em: это em корневого элемента, и он никогда не умножается. Если вы работаете в обоих, конвертировать px в em, чтобы пойти в другую сторону.

Когда разработчики конвертируют em в px

Сверка сборки с файлом макета

Дизайнер передаёт файл в пикселях, а код — в em. Чтобы проверить, что страница соответствует, вы конвертируете em в px, используя размер шрифта каждого компонента. Кнопка с подписью в 14 px и внутренними отступами 0.714em 1.429em должна дать 10 px и 20 px, и если в макете сказано 12 и 24, одно из них неверно.

Отладка отступов

Когда промежуток выглядит слишком большим или слишком малым, причина обычно в значении em, относящемся к большему или меньшему шрифту, чем вы ожидали. Конвертация его с вычисленным размером шрифта элемента сразу говорит, в арифметике ли проблема.

Чтение незнакомого кода

Унаследованные таблицы стилей полны значений em, размеры которых в пикселях нужно восстановить. Конвертация нескольких основных, с правильными базами, даёт вам карту дизайна.

Написание документации и тестов

Люди, тестирующие страницу, описывают то, что видят, в пикселях. Разработчик, говорящий, что отступ — 0.9em, мало что говорит тестировщику; 12,6 px — говорит. Конвертация помогает двум сторонам понять друг друга.

Ловушки при конвертации em в px

Использование неверной базы

Самая частая ошибка. Для font-size используйте размер родителя; для всех остальных свойств — собственный размер элемента. Проверьте свойство, прежде чем вводить базу.

Забытый родитель в em

Если размер родителя сам в em, нужно проследить цепочку. Используйте вычисленное значение из инструментов разработчика, чтобы сократить путь.

Предположение, что экран показывает те же пиксели

CSS-пиксель — не пиксель устройства. На дисплее высокой плотности один CSS-пиксель может быть двумя или тремя пикселями устройства. Конвертация даёт CSS-пиксели, единицу, которую делят инструменты дизайна и таблица стилей.

Принятие ответа за обещание

Если читатель увеличивает текст или компонент используется повторно с другим размером шрифта, пиксели меняются, как им и положено. Конвертированное число описывает одну ситуацию, а не все.

Вопросы, которые задают перед конвертацией

Сколько пикселей в 1 em?

Столько, каков действующий размер шрифта: 16 px для обычного основного текста по умолчанию, 24 px внутри элемента в 24 px.

Сколько пикселей в 2 em?

Вдвое больше действующего размера шрифта. При 16 px это 32 px.

Почему мой браузер показывает другое?

Реальный размер шрифта элемента отличается от введённой вами базы. Прочтите вычисленный размер шрифта в инструментах разработчика.

Одно и то же ли em и rem?

Нет. Em относителен элементу, rem — корню.

Загружается ли моё число?

Нет. Арифметика выполняется в вашем браузере, и ничто никуда не отправляется.

Как вернуться назад?

С помощью px в em, который делит вместо умножения.

Привычки, делающие таблицу стилей на em понятной

Комментируйте базу

Строка вроде padding: 0.75em 1.25em; /* 12px 20px at 16px */ стоит нескольких символов и избавляет следующего читателя от конвертации. Она записывает предполагавшуюся базу.

Задавайте размер шрифта один раз на компонент

Определите размер шрифта компонента на его корневом элементе и ссылайтесь на него через em внутри. База тогда одна и та же для каждого значения в компоненте, и вы можете конвертировать em в px относительно неё с уверенностью.

Em для отступов, rem для шрифта

Это разделение, на котором останавливается большинство таблиц стилей, и оно упрощает арифметику. Для размеров, относительных экрана, инструменты — px в vw и vw в px.

Проверяйте при другом размере текста

Увеличьте размер текста по умолчанию в браузере и посмотрите на страницу. Если отступы следуют за текстом, значения em работают. Если нет, что-то осталось в пикселях.

Метод для сложных случаев

Работайте снаружи внутрь

Когда компонент глубоко внутри других и его значения em выглядят запутанно, начните с самого внешнего элемента, размер которого вы знаете, и двигайтесь внутрь, конвертируя по одному уровню за раз. Записывайте каждый размер в пикселях в заметку по ходу дела. После двух-трёх уровней вся цепочка на бумаге, и вы видите, откуда берётся неожиданное число. Это занимает минуту и заменяет час гадания.

Решите, стоит ли упрощать

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

Связанные конвертеры

То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться к em, используйте px в em. Для размеров, относительных корня, есть px в rem и rem в px, а для размеров, относительных экрана, — px в vw и vw в px. Для цветов той же таблицы стилей HEX в RGB и RGB в HEX справляются с обозначениями.

Разобранный пример

Скажем, вы просматриваете компонент кнопки. Подпись — 14 px, в CSS написано padding: 0.714em 1.429em и промежуток 0.5em между значком и подписью. Вы вводите 14 как базу, затем 0,714 и читаете 10 px, 1,429 и читаете 20 px, 0,5 и читаете 7 px. В файле макета сказано 10, 20 и 8. Два из трёх совпадают, поэтому вы смотрите на промежуток: 8 px при базе 14 было бы 0,571 em, и кто-то округлил до 0,5. Вы поднимаете это на ревью, и исправление — одно число.

Короткий контрольный список

Перед конвертацией

Найдите размер шрифта, к которому относится em, в инструментах разработчика или по цепочке размеров шрифта в коде.

Во время конвертации

Введите значение em, задайте базу и прочтите пиксели, отметив базу, показанную рядом с результатом.

После конвертации

Сравните с файлом макета. Если числа различаются, проверьте базу, прежде чем подозревать код.

Типичные ошибки

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

Это верно, только когда размер шрифта элемента — 16 px.

Путаница em и rem

Они выглядят похоже и ведут себя по-разному. Используйте нужную страницу для каждого.

Забывать, что em накапливается

Значение внутри вложенного элемента относительно размера, которого вы могли не видеть. Проследите цепочку.

Ваши числа остаются на вашем устройстве

Расчёт происходит локально. Ваши значения используются вашим собственным браузером, и ничто никуда не отправляется. Нечего удалять потом и не нужно создавать аккаунт. Это простой способ конвертировать em в px.

Итог

Чтобы конвертировать em в px здесь, введите размер в em и размер шрифта, к которому он относится, и сразу прочтите результат в пикселях по формуле px = em × база. Конвертация сохраняет пропорцию относительно размера шрифта, действующего там, где используется значение. Она не может дать единый ответ для страницы: em относителен самому элементу или родителю для font-size, поэтому те же 1,5 em — это 24 px внутри элемента в 16 px и 36 px внутри элемента в 24 px, а em внутри em умножается. Для одного числа, действующего везде, используйте rem. Ничто не загружается.