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

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

Em — старейшая относительная единица в CSS и та, что вызывает больше всего споров. У вас есть размер в пикселях из файла макета, 20 px отступа на кнопке, 14 px пространства рядом со значком, 36 px для заголовка, и вы хотите получить его в em, чтобы он следовал за текстом, к которому относится. Когда вы конвертируете px в em, вы задаёте определённый вопрос: какая это доля текущего размера шрифта? Ответ зависит от числа, которое страница угадать не может, — размера шрифта, действующего там, где используется значение, поэтому конвертер выносит это число в поле и использует его открыто.

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

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

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

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

Формула — одно деление: em = px ÷ база. При базе 16 px значение 24 px становится 1,5 em, 8 px становится 0,5 em, а 20 px становится 1,25 em. Страница показывает базу рядом с результатом, как в 24 px = 1,5 em (16 px), так что вы видите, что предполагалось. Арифметика та же, что и для rem. Смысл другой.

Что такое база

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

Значение по умолчанию, когда вы не знаете

Если вам нужна лишь приблизительная цифра, оставьте базу 16 — размер обычного текста в браузере, который никто не менял. Результат верен для блока обычного основного текста и даёт представление о пропорции, даже если у элемента окажется другой размер.

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

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

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

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

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

Округление

Деление на 16 даёт чистые значения для многих размеров и периодические десятичные дроби для других. Значение вроде 0,8125 em годится в таблице стилей, но вы можете предпочесть округлить до 0,8 или 0,85, если точный размер не важен. Оставляйте полную цифру там, где важна точность.

Ловушка вложенности

Как em накапливается

Предположим, у списка font-size: 0.875em, и у его пунктов тоже font-size: 0.875em. Список составляет 87,5% родителя. Каждый пункт — 87,5% списка, то есть около 76,6% родителя. Список, вложенный в пункт, уменьшается снова, примерно до 67%. После трёх уровней текст очень мал, и никто не писал этого нарочно. Это и имеют в виду, когда говорят, что em накапливается.

Почему это важно, когда вы конвертируете px в em

Если вы конвертируете значение в пикселях в em для font-size, база, которую нужно использовать, — размер шрифта родителя, а не самого элемента. Многие ошибки происходят от использования не той. Для других свойств, таких как padding и margin, база — собственный размер шрифта элемента. Правило легко сказать и легко забыть: font-size смотрит вверх, всё остальное смотрит на себя.

Как избежать сюрпризов

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

Распространённые размеры

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

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

Смена базы под элемент

Если для небольшой кнопки задать базу 14, таблица меняется: 14 px теперь 1 em, 7 px — 0,5 em, а 21 px — 1,5 em. Попробуйте, и вы увидите, как отступ в 1,5 em имеет другой размер в пикселях в кнопке на 14 px, чем в кнопке на 18 px, и почему это полезно.

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

Введите значение в пикселях

Введите размер в пикселях в первое поле. Десятичные дроби принимаются.

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

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

Скопируйте значение em

Используйте цифру в вашем CSS с единицей, как в padding: 1.25em. Число без единицы недопустимо для большинства свойств.

Откуда берутся эти единицы

Em в металлическом наборе

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

Пиксель и rem

Пиксель CSS — это эталонная длина около 1/96 дюйма, видимая с удобного расстояния чтения, а не точка на вашем экране. Rem добавили, чтобы дать разработчикам единицу, относительную, но никогда не накапливающуюся: это em корневого элемента. Вместе пиксель, em и rem покрывают три потребности: фиксированный размер, размер относительно текста и размер относительно страницы.

Где em — верный выбор

Отступы внутри кнопок и полей форм

Кнопка с padding: 0.5em 1em выглядит одинаково пропорциональной при любом размере текста. Сделайте подпись крупнее, и вся кнопка вырастет вместе с ней, а этого и ждёшь от компонента, который может использоваться и на панели инструментов, и в hero-баннере.

Промежутки рядом со значками

Значку с подписью нужен промежуток, масштабирующийся вместе с подписью. Поле в 0.4em это делает; поле в 6px — нет.

Поля вокруг заголовков и абзацев

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

Медиазапросы

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

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

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

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

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

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

Ожидание одной цифры для всего компонента

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

Смешивание em и rem для одного свойства

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

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

Сколько em составляют 16 px?

Один, если действующий размер шрифта — 16 px. Если размер шрифта элемента — 20 px, то 16 px — это 0,8 em.

Лучше ли em, чем rem?

Ни то ни другое не лучше. Rem лучше для размеров шрифтов и общей раскладки. Em лучше для отступов, которые должны следовать за собственным текстом.

Почему мой отступ больше ожидаемого?

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

Можно ли использовать десятичные дроби?

Да. Значения вроде 0,625em и 1,333em — обычное дело.

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

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

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

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

Разумный выбор, когда вы конвертируете px в em

Решите, чему принадлежит значение

Если оно принадлежит тексту, em верен. Если оно принадлежит странице, например ширине колонки или промежутку между разделами, лучше подходят rem или единица области просмотра. Px в vw выражает размер как долю ширины экрана.

Запишите замысел в комментарии

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

Держите размер шрифта компонента в одном месте

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

Хорошие привычки, когда вы конвертируете px в em

Конвертируйте px в em по одному компоненту

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

Используйте калькулятор для странных значений, а не для круглых

Значения вроде 8, 16 и 24 пикселей конвертируются в аккуратные числа em при базе 16. Странные значения вроде 22 или 13 дают длинные десятичные дроби. Когда вы конвертируете px в em для них, решите, нужна ли дизайну точная цифра или ближайшее круглое значение em подошло бы не хуже. Дизайнеры часто готовы округлить, а аккуратная таблица стилей легче в поддержке.

Храните запись о базе

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

Сравнивайте с эквивалентом в rem

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

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

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

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

Допустим, подпись кнопки — 14 px, а макет даёт кнопке 10 px вертикального отступа и 20 px горизонтального. Вы вводите 14 как базу, 10 и читаете 0,714 em, вводите 20 и читаете 1,429 em. В таблице стилей вы пишете padding: 0.714em 1.429em. Когда та же кнопка используется в hero-блоке с подписью 18 px, отступы становятся 12,9 px и 25,7 px, пропорционально. Если бы вы написали 10px и 20px, кнопка выглядела бы тощей вокруг более крупного текста.

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

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

Решите, какому свойству принадлежит значение, и найдите размер шрифта, относительно которого оно должно быть.

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

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

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

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

Частые ошибки

Использование корневого размера как базы для отступа

Это работа rem. Em относится к собственному размеру шрифта элемента.

Использование em для каждого размера шрифта

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

Округление до визуально аккуратного, но неверного числа

1,43 — не то же самое, что 1,5, при умножении на крупный шрифт. Оставляйте достаточно знаков.

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

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

Итог

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