Что делает этот конвертер px в rem и em
Инструмент переводит значения между тремя единицами измерения: px, rem и em. Вы вводите число в любое из полей — «Значения», «Базовый размер шрифта (px)» или «Размер шрифта контекста em (px)» — и остальные величины пересчитываются автоматически. Дополнительно на странице показана таблица «Популярные значения px → rem (база 16px)» с готовыми соответствиями пикселей и rem при стандартной базе в 16 пикселей.
Такой набор полей удобен, когда нужно перевести фиксированное значение в пикселях в относительную единицу для CSS, и наоборот — понять, во сколько пикселей превратится указанное значение rem или em при заданных настройках шрифта.
Кому пригодится такой конвертер
Инструмент рассчитан на тех, кто переводит фиксированные значения в пикселях в относительные единицы rem или em для адаптивной вёрстки. Он также полезен, если нужно наглядно увидеть, как разные значения базового размера шрифта меняют получившиеся rem, или рассчитать em исходя из размера шрифта конкретного элемента. Ещё один сценарий — проверить, что размеры на странице действительно масштабируются правильно, если читатель меняет размер шрифта по умолчанию в своём браузере.
Как ввести значение и увидеть результат
Достаточно вписать число в одно из трёх полей — px, rem или em, — и оставшиеся два поля обновятся сами, без отдельной кнопки «Рассчитать». На странице это объясняется подсказкой: «Введите значение в px, rem или em — остальные два поля обновятся автоматически по мере ввода». После пересчёта интерфейс показывает, что значение «Конвертировано по всем трем единицам».
Отдельно от поля «Значения» на странице стоят два поля настроек: «Базовый размер шрифта (px)» и «Размер шрифта контекста em (px)». Они не участвуют в самом преобразуемом числе, но определяют, как именно px переводится в rem и em.
Поле «Значения» допускает отрицательные числа в пикселях — инструмент не ограничивает ввод только положительными величинами. Если же в это поле попадает нечисловой или пустой ввод, появляется сообщение «Введите число для конвертации.».
Базовый размер шрифта и его влияние на rem
Поле «Базовый размер шрифта (px)» задаёт, какому количеству пикселей соответствует 1rem. По умолчанию оно равно 16px. Если вы измените это значение, все текущие результаты в rem пересчитаются под новую базу — сам инструмент так реагирует на правку любого из трёх полей.
Значение в этом поле должно быть числом больше 0. Если ввести что-то другое — пустую строку, ноль, отрицательное число или текст, — появится сообщение «Базовый размер шрифта должен быть числом больше 0.».
Размер шрифта контекста em и зачем он нужен
Второе поле настроек, «Размер шрифта контекста em (px)», задаёт размер шрифта элемента, для которого рассчитывается em. По умолчанию оно тоже равно 16px. Как и с базовым размером, к нему применяется то же требование: значение должно быть числом больше 0, иначе появится сообщение «Размер шрифта контекста em должен быть числом больше 0.».
При настройках по умолчанию — базовый размер 16px и контекст em 16px — 16 пикселей равны 1rem и одновременно равны 1em. Это стартовая точка, от которой удобно отталкиваться, меняя одно из полей и наблюдая, как реагируют остальные.
Таблица популярных значений px → rem
Ниже полей преобразования на странице расположена таблица «Популярные значения px → rem (база 16px)». В ней собраны часто встречающиеся значения в пикселях с готовым переводом в rem при стандартной базе 16px — её удобно использовать как быструю справку, не вводя каждое число в поле «Значения» по отдельности.
Как обрабатываются ваши данные
Каждое преобразование выполняется в вашем браузере. Никакие вводимые данные не отправляются на BroBroGo.
Часто задаваемые вопросы
В чем разница между px, rem и em? Пиксель (px) — это фиксированная величина. Единица rem рассчитывается относительно базового размера шрифта страницы (при базе 16px значение 1rem равно 16px). Единица em рассчитывается относительно размера шрифта элемента, в котором она находится. Использование rem для шрифтов и отступов позволяет интерфейсу корректно масштабироваться, когда пользователь меняет настройки шрифта по умолчанию в своем браузере.
Зачем нужен отдельный контекстный размер для em? Единица em рассчитывается относительно размера шрифта родительского элемента, который не всегда совпадает с базовым (root). Укажите в поле контекста em размер шрифта этого родительского элемента для точного расчета, или оставьте его равным базовому, если они совпадают.
Что делать, если базовый размер шрифта отличается от 16px? Просто измените значение в поле базового размера шрифта, чтобы оно соответствовало вашему CSS, и все значения rem мгновенно пересчитаются. Таблица ниже служит удобным справочником для стандартной базы в 16px, с которой начинается разработка большинства сайтов.