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

Единицы CSS rem масштабируются от размера шрифта корневого элемента (обычно элемента html), а не от каждого родительского элемента, такого как em. Один rem равен размеру пикселя, установленному в корне. В браузерах по умолчанию используется корневой размер 16 пикселей, поэтому 1 rem = 16 пикселей по умолчанию, если только ваша таблица стилей не изменит html {font-size}. rem учитывает пользовательские настройки масштабирования и специальных возможностей, которые увеличивают текст по умолчанию; px остается абсолютным в пиксельной сетке.

Передача дизайна из Figma и Sketch обычно аннотирует px, в то время как рабочие базы кода часто создают пробелы и вводят rem для согласованности с токенами дизайна. Этот конвертер устраняет разрыв с выбранным корневым размером вашего проекта. Многие системы дизайна сохраняют корень размером 16 пикселей; некоторые команды устанавливают корень в 10 пикселей, поэтому карты ментальной математики 1,6 rem ≈ 16 пикселей — всегда соответствуют значению в вашем глобальном CSS.

Переключите rem → px или px → rem с помощью сегментированного элемента управления. Метка поля значения изменится, показывая, какую единицу измерения вы вводите. Поле размера корневого шрифта устанавливает множитель — если используется ваш трюк с html {font-size: 62,5% }, то эффективный корень составляет 10 пикселей, а не 16 пикселей.

Рабочий пример с полями rem → px по умолчанию: 1,5 rem при корне 16 пикселей. Умножьте 1,5 × 16 = результат заголовка размером 24 пикселя. В сводке указано «1,5 rem @ корень 16 пикселей», а в строке формулы отображается 1,5 × 16. Переключитесь на px → rem с введенными 48 пикселями, и вы получите 3 rem (48 ÷ 16).

Общие записи шкалы интервалов: 0,25 rem = 4 пикселя, 0,5 rem = 8 пикселей, 1 rem = 16 пикселей, 1,5 rem = 24 пикселя, 2 rem = 32 пикселя в корне по умолчанию. Шаги типографики часто используют 0,875 rem (14 пикселей) для небольшого текста пользовательского интерфейса и 1,125 rem (18 пикселей) для большого текста, который соответствует пороговым значениям контрастности большого текста WCAG.

Распространенные ошибки включают преобразование с корнем размером 16 пикселей, в то время как в производстве используется корень размером 10 пикселей (все поставляется с уменьшенным размером), смешивание rem-заполнения с em-высотой строки во вложенных компонентах и ​​принятие браузером значения по умолчанию после того, как пользователь изменил размер текста доступности ОС — rem работает с этой настройкой, px — нет.

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

Ограничения: преобразование одного значения — нет функции Calc() со смешанными единицами измерения, области просмотра vw или точек останова зажима(). Субпиксельные результаты могут отображаться для нечетных корней; браузеры округляют пиксели во время рендеринга.