| px | rem |
|---|
Об этом инструменте
rem (root em) — это единица длины CSS, относительная к размеру шрифта корневого элемента <html>, тогда как px — это абсолютный пиксель устройства. При размере корня по умолчанию в браузере 16px 1rem равен 16px, поэтому 24px — это 1.5rem, а 10px — это 0.625rem. Поскольку rem масштабируется вместе с корневым размером, смена базы пересчитывает сразу все значения rem — этот конвертер позволяет вам задать эту базу и переводить значения в обоих направлениях.
Используйте его, чтобы перенести дизайн-систему на основе px в масштабируемые единицы rem, задавать размеры типографики и отступов, учитывающие настройку размера шрифта в браузере пользователя, проверить шкалу Tailwind или дизайн-токенов либо восстановить методом обратного проектирования значение в пикселях за объявлением в rem в чужой таблице стилей. Справочная таблица одним взглядом даёт вам эквивалент в rem для распространённых шагов в px при выбранной базе.
rem относителен к размеру шрифта корня (<html>), а не родительского элемента — это единственное отличие от em, который относителен к собственному родителю.
Часто задаваемые вопросы
Как конвертировать px в rem?
Разделите значение в пикселях на корневой размер шрифта. При корне по умолчанию 16px 24px ÷ 16 = 1.5rem, а 10px ÷ 16 = 0.625rem. Измените базу — и то же значение в px отобразится в другой rem.
Всегда ли 1rem равен 16px?
Только когда корневой размер шрифта равен значению браузера по умолчанию 16px. 1rem равен той font-size, которая задана для элемента <html>, поэтому если корень равен 10px, то 1rem равен 10px.
В чём разница между rem и em?
rem всегда относителен к размеру шрифта корня (<html>), поэтому остаётся единообразным по всей странице. em относителен к размеру шрифта собственного элемента/родителя, поэтому вложенные значения em накапливаются и могут смещаться.