Конвертер PX в REM

Что умеет инструмент

Инструмент переводит длины CSS между пикселями и относительными единицами rem и em. Введите одно значение, например 24px, и получите 1.5rem; перечислите несколько значений по одному в строке, чтобы перевести их разом; или вставьте целую таблицу стилей — все значения px в ней будут заменены на месте. Справочная таблица показывает распространённые размеры от 1px до 128px при вашем базовом размере. Ничего не покидает браузер.

Как пользоваться

1. Вставьте CSS или введите значения по одному в строке. Числа без единиц считаются px (или rem/em при обратном направлении), а значение в другой единице переводится в обратную сторону.
2. Задайте Базовый размер шрифта. Во всех браузерах по умолчанию 16px; в некоторых проектах пишут html { font-size: 62.5% }, чтобы 1rem = 10px.
3. Выберите Направление (px → rem или rem → px), Единицу (rem или em) и число Знаков после запятой.
4. При желании задайте Оставлять в px значения меньше, чтобы рамки в 1px и другие тонкие линии остались в px.
5. Скопируйте результат кнопкой над ним.

Пример

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Значения не в px — проценты, цвета, имена файлов в url() и классы вроде .mt-16px — не меняются. 0px превращается в 0.

px, rem и em

• px — абсолютная единица, она не учитывает предпочтительный размер шрифта читателя.
• rem («root em») — кратное размера шрифта элемента html. Если читатель выставит в браузере 20px, 1rem станет 20px, и вся вёрстка масштабируется.
• em — кратное размера шрифта текущего элемента. Удобно для отступов, которые должны следовать за своим текстом, но вложенные em перемножаются, поэтому rem надёжнее как вариант по умолчанию.

Медиазапросы тоже переводятся: @media (min-width: 768px) становится 48rem (или 48em), и точки перелома остаются согласованными при увеличении текста. В медиазапросах rem и em отсчитываются от размера шрифта браузера по умолчанию, а не от вашего правила для html.