PX в REM
Чтобы перевести px в rem, разделите значение в пикселях на размер шрифта корневого элемента: rem = px / база. При базе браузера по умолчанию 16px получается 24px / 16 = 1.5rem. Измените базу ниже — 14px для Ant Design, 10px для приёма с 62,5 % — и значения rem и em последуют за ней; значение в пунктах зависит от пикселей, ведь 1px — это всегда 0,75pt.
Преобразуйте px, rem, em и pt и проверьте замены в CSS.
Положительный корень; модуль ≤1 млрд; округление до шести знаков. Просмотр ограничен 8–72px. CSS ≤100 000 символов. Меняются только некавыченные токены px в значениях; комментарии, строки, URL и content сохраняются. Проверьте результат: ограниченное лексическое преобразование, не валидатор CSS. Числа CSS с показателем степени (например 1e+3px или 1e-3px) целиком сохраняются без изменений.
Преобразование выполняется на этой странице без отправки введённых чисел или CSS в службу преобразования.
Поле em исходит из того, что элемент наследует базовый размер шрифта, заданный выше. В CSS em считается от размера шрифта самого элемента — и от размера родителя, когда вы задаёте им саму font-size.
Пакетный перевод: вставьте CSS или список значений в px
Каждое значение в px переписывается в rem относительно базового размера шрифта выше.
Скопировано
Не удалось скопировать. Выделите результат и скопируйте вручную.
Как перевести px в rem?
Формула: rem = px / базовый размер шрифта, обратная — px = rem x базовый размер шрифта. Учитывается только размер шрифта корневого элемента html, как бы глубоко ни был вложен сам элемент, и именно поэтому арифметика rem предсказуема. При базе 16px по умолчанию: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem и 40px = 2.5rem.
Не округляйте результат. 15px при базе 16px — это ровно 0.9375rem; округление до 0.94rem смещает отрисованный размер к 15.04px и ломает выравнивание по сетке. Браузеры считают субпиксельные длины и при отрисовке привязывают их к пиксельной сетке устройства, поэтому копируйте точное значение, которое даёт конвертер. Конвертер выводит до шести знаков после запятой: точно для баз, которые делятся нацело, например 16px и 10px, и с точностью до миллионной доли rem для базы вроде 14px, которая не делится.
Таблица px в rem при базе 16px, 14px и 10px
Одно и то же значение в пикселях превращается в три разных значения rem в зависимости от базы, заданной в проекте, поэтому в таблице приведены все три, а также эквивалент в пунктах (CSS определяет 1px как 1/96 дюйма, а 1pt как 1/72 дюйма, поэтому 1px = 0.75pt). Столбцы для 16px и 10px точны. При базе 14px деление почти никогда не бывает точным, поэтому такие значения округлены до четырёх знаков и помечены знаком приближения; конвертер выше показывает больше знаков.
| Пиксели | rem (база 16 px) | rem (база 14 px) | rem (база 10 px) | Пункты |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem или em: какую единицу выбрать?
Практическое разделение: rem — для всего, что должно следовать за размером текста читателя, em — для значений, которые должны следовать за размером шрифта самого элемента, а px — только там, где длина обязана оставаться физически постоянной. Столбец с примером рассчитан на базу 16px и родителя с размером 16px.
| Единица | Относительно чего | 20px равно | Лучше всего для | Следует за размером текста читателя |
|---|---|---|---|---|
| px | Ни от чего — абсолютная единица (1px = 1/96 дюйма) | 20px | Тонкие рамки, кольца фокуса, точные размеры иконок | Нет |
| rem | Размер шрифта корневого элемента html | 1.25rem | Размеры текста, отступы, брейкпоинты, целые типографские шкалы | Да |
| em | Размер шрифта самого элемента (родителя — при задании font-size) | 1.25em | Внутренние отступы, которые должны расти вместе с подписью | Да |
| % | Значение родителя для этого свойства | 125% | Резиновые ширины и старые цепочки font-size | Да (font-size) |
Что использовать для отступов, полей и рамок: px или rem?
Используйте rem для внутренних и внешних отступов, которые должны дышать вместе с ростом текста: отступы кнопок, поля карточек, промежутки между секциями, зазоры сетки. Для тонких линий оставьте px. Рамка в 1px — это один чёткий аппаратно-независимый пиксель, а та же рамка, записанная как 0.0625rem, при некоторых масштабах округляется до нуля или размывается; то же касается колец фокуса и разделителей толщиной 2px. Поэтому пакетный перевод выше по умолчанию не трогает значения 1px и 2px и переписывает всё остальное.
Медиазапросы — второе место, где rem окупается. Внутри медиазапроса rem считается от исходного размера шрифта браузера, а не от вашего правила для html: брейкпоинт 48rem равен 768px при настройках по умолчанию и растёт для читателя, который увеличил размер текста. Брейкпоинты в px не сдвигаются никогда.
Как перевести px в rem в Figma, VS Code и Tailwind?
Figma измеряет в px, но Dev Mode умеет выводить rem: откройте настройки Inspect, выберите «Set unit scale» и укажите корневой размер шрифта (по умолчанию 1rem = 16px). Расширения VS Code вроде cssrem конвертируют через автодополнение и выносят базу в настройки — cssrem.rootFontSize, по умолчанию 16, — поэтому проверьте её, прежде чем доверять результату в проекте с базой 14px. Целый файл вставьте в поле массовой конвертации выше, предварительно задав базу. Стандартная шкала Tailwind уже построена на rem при базе 16px: одна единица отступа равна 0.25rem (4px), поэтому 16px — это 4, 24px — 6, а 40px — 10.
Источники
О PX в REM
Преобразуйте px, rem, em и pt и проверьте замены в CSS.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Положительный корень; модуль ≤1 млрд; округление до шести знаков. Просмотр ограничен 8–72px. CSS ≤100 000 символов. Меняются только некавыченные токены px в значениях; комментарии, строки, URL и content сохраняются. Проверьте результат: ограниченное лексическое преобразование, не валидатор CSS. Числа CSS с показателем степени (например 1e+3px или 1e-3px) целиком сохраняются без изменений.
Примеры использования
Как использовать
Задайте корень, измените единицу и при необходимости вставьте CSS. ≤2px сохраняет малые размеры; CSV содержит уникальные преобразованные пары чисел.
Положительный корень; модуль ≤1 млрд; округление до шести знаков. Просмотр ограничен 8–72px. CSS ≤100 000 символов. Меняются только некавыченные токены px в значениях; комментарии, строки, URL и content сохраняются. Проверьте результат: ограниченное лексическое преобразование, не валидатор CSS. Числа CSS с показателем степени (например 1e+3px или 1e-3px) целиком сохраняются без изменений.
Советы профессионалов
- Положительный корень; модуль ≤1 млрд; округление до шести знаков. Просмотр ограничен 8–72px. CSS ≤100 000 символов. Меняются только некавыченные токены px в значениях; комментарии, строки, URL и content сохраняются. Проверьте результат: ограниченное лексическое преобразование, не валидатор CSS. Числа CSS с показателем степени (например 1e+3px или 1e-3px) целиком сохраняются без изменений.
- rem = px / корневой размер; em предполагает тот же контекст; pt = px × 0,75 при 96 пикселях CSS на дюйм.
Часто задаваемые вопросы
Здесь контекст em равен корню. В CSS он зависит от соответствующего размера шрифта и вложенности.
Строки, комментарии, функции URL и content сохраняются. Проверьте таблицу стилей; сложный или ошибочный CSS не проверяется.