Как перевести px to rem и выбрать единицы CSS

Для перевода px to rem разделите размер в пикселях на размер шрифта корня. Единицы px, em и rem задают размеры по разным правилам: для общей типографики и сетки обычно подходят rem, для локальных компонентов – em, для рамок и точных линий – px. Разберем также формулы px to em и rem в px, сравним единицы и проверим вычисленные значения во вкладке Computed.

Что такое px в CSS

CSS-пиксель – опорная единица длины, которая не обязана совпадать с физическим пикселем экрана. Спецификация CSS Values and Units связывает опорный пиксель с углом обзора, а не только с размером матрицы.

CSS определяет соотношение 1px = 1/96in. На дисплее браузер учитывает плотность экрана, масштаб страницы и другие параметры вывода. Поэтому один CSS-пиксель может занимать несколько физических пикселей.

Свойство devicePixelRatio показывает отношение физических пикселей к CSS-пикселям. Масштаб страницы увеличивает видимый размер элементов, хотя правило font-size: 16px в таблице стилей остается тем же.

Берите px для тонких рамок, теней и небольших точных смещений. Размер основного текста в px требует отдельной проверки доступности, потому что пользовательская настройка шрифта может на него не повлиять.

Что такое em и от чего он считается

Единица em связывает размер с вычисленным шрифтом элемента или его родителя. База зависит от свойства, поэтому перед расчетом определите, что именно вы меняете.

В свойстве font-size em считается от размера шрифта родителя. В padding, margin и других свойствах размеров em считается от вычисленного шрифта самого элемента. Подробное описание единиц есть в руководстве MDN о значениях CSS.

.card {
  font-size: 1.25em;
  padding: 1em;
}

При шрифте родителя 16px значение font-size: 1.25em дает карточке 20px. Затем браузер считает padding: 1em от шрифта самой карточки, поэтому внутренний отступ тоже получает 20px.

В одном правиле базы уже разные: значение em в font-size смотрит на родителя, а значение em в padding смотрит на результат первого расчета. Это правило объясняет большую часть неожиданных размеров.

.parent { font-size: 1.25em; }
.child { font-size: 1.2em; }

Родитель получает 20px от базы 16px. Дочерний элемент получает 24px по расчету 20 × 1.2 = 24. Каждый следующий уровень с font-size в em продолжает цепочку.

Такое масштабирование удобно для кнопки или карточки, которая должна расти вместе с собственным текстом. Во вложенных списках цепочка быстро становится трудной для контроля, поэтому для общей шкалы там удобнее rem.

Что такое rem и почему он не накапливается

Единица rem вычисляется от вычисленного свойства font-size корневого элемента html. Браузер каждый раз берет размер корня для расчета rem, поэтому промежуточные размеры родителей в эту базу не входят.

Rem не наследуется от html как готовое значение. Браузер вычисляет его по размеру корня для каждого свойства, где вы указали rem.

html { font-size: 100%; }
.parent { font-size: 1.25rem; }
.child { font-size: 1.2rem; }

При корне 16px родитель получает 20px, а дочерний элемент – 19,2px. Расчет дочернего значения идет от 16px, поэтому результат родителя не добавляется к базе.

Размер шрифта браузера по умолчанию равен 16px. Если html сохраняет зависимость от этой настройки через 100% или не заданное автором значение, пользовательский размер меняет и значения в rem.

Чтобы проверить настройку, откройте параметры браузера и введите в поле поиска слово «шрифт». В Chrome найдите управление размером шрифта, а в Firefox – поле размера шрифта в настройках шрифтов. Временно увеличьте значение с 16px до 20px и откройте страницу с html { font-size: 100%; }.

Текст с размером 1rem должен увеличиться. После проверки верните прежнее значение. Если задать html размером 16px, пользовательская настройка обычного размера текста перестанет влиять на корневую базу, хотя масштаб страницы продолжит работать.

Перевод px to rem и rem в px

Для перевода px to rem разделите значение в пикселях на размер шрифта корня. Для перевода rem в px умножьте значение на ту же базу.

rem = px / размер корня px = rem × размер корня

При корне 16px значение 24px переводится так: 24 / 16 = 1.5rem. Обратный расчет дает 1.5 × 16 = 24px.

Формулы работают при любом корневом размере. При корне 20px значение 24px соответствует 24 / 20 = 1.2rem. То же значение 1.2rem превращается обратно в 1.2 × 20 = 24px.

Оставьте корневой размер зависимым от пользовательской настройки, если хотите сохранить масштабирование текста. Фиксированный font-size: 16px на html разрывает эту зависимость.

Как рассчитать px to em

Для перевода px to em выберите базу расчета. Для font-size делителем служит шрифт родителя, для padding и margin – вычисленный шрифт текущего элемента.

em = px / базовый размер шрифта px = em × базовый размер шрифта

.title {
  font-size: 1.5em;
  padding: 0.667em;
}

Если шрифт родителя равен 16px, значение 1.5em в font-size дает заголовку 24px. После этого 0.667em в padding считается от 24px и дает примерно 16px: 24 × 0.667 ≈ 16.

Один и тот же 1em дает 16px у элемента со шрифтом 16px и 24px у элемента со шрифтом 24px. Поэтому em подходит для полей и размеров компонента, которые должны увеличиваться вместе с его текстом.

Перед переводом запишите базу рядом со свойством. Такой простой шаг не дает случайно поделить padding на шрифт родителя или font-size на шрифт текущего элемента.

Сравнение px, em и rem

Сравните единицы по источнику масштаба и реакции на вложенность. Выбирайте px для независимых деталей, em для локальной связи с компонентом и rem для общей шкалы страницы.

Какую единицу выбрать для шрифта, отступов и медиазапросов

Сначала определите источник масштаба. Общую систему связывайте с html, локальный компонент – с его шрифтом, а точную линию – с CSS-пикселем.

• Корневой и основной шрифт. Оставьте html со значением 100% или без авторского font-size, а для основного текста используйте 1rem. Так пользовательская настройка сохраняет влияние на типографику.
• Заголовки. Берите rem, чтобы уровни сохраняли пропорции при изменении корневого размера.
• Отступы компонента. Выбирайте em, если внутренние поля должны расти вместе со шрифтом компонента.
• Раскладка. Используйте rem для общих промежутков и размеров сетки, связанных с корневой шкалой.
• Медиазапросы. Выбирайте em или rem, когда порог должен учитывать размер текста. В медиазапросах обе единицы считаются от начального размера шрифта браузера, поэтому font-size на html эту базу не меняет.
• Рамки и тени. Оставляйте px для толщины линии и небольших точных смещений.
• Высота строки. Задавайте line-height без единиц, например 1.5. Браузер умножит число на текущий размер шрифта.

При начальном размере 16px медиазапрос min-width: 48em соответствует порогу 768px. При начальном размере 20px тот же порог равен 960px. Значение font-size на html не меняет расчет медиазапроса.

Единицы %, vw и vh решают другие задачи. Функция clamp() ограничивает размер диапазоном и связывает его с размером окна, когда одной rem недостаточно.

Пример расчета типографики в CSS

Возьмем базовый размер 16px и переведем размеры текста, отступы и интервалы в относительные значения. Такой набор дает читаемую шкалу без слишком маленьких шрифтов.

html {
  font-size: 100%;
}

body {
  font-size: 1rem;       /* 16px */
  line-height: 1.5;
}

h1 {
  font-size: 2rem;       /* 32px */
  margin-bottom: 1rem;   /* 16px */
}

h2 {
  font-size: 1.5rem;     /* 24px */
  margin-bottom: 0.75rem;/* 12px */
}

h3 {
  font-size: 1.25rem;    /* 20px */
  margin-bottom: 0.5rem; /* 8px */
}

p {
  margin: 0 0 1em;
}

При базе 16px body получает 16px, h1 – 32px, h2 – 24px, h3 – 20px. Отступ абзаца в 1em считается от шрифта самого абзаца, поэтому при обычном тексте он равен 16px.

Чтобы увидеть вычисленное значение, откройте страницу с этим CSS и запустите DevTools. Выберите элемент, перейдите на вкладку Computed и найдите свойство font-size. Для абзаца браузер покажет 16px, если на него не повлияли другие правила.

1. Откройте страницу с примененным CSS и запустите DevTools сочетанием Ctrl+Shift+I в Windows или Linux либо Command+Option+I в macOS.
2. Выберите инструмент выбора элемента и щелкните по абзацу страницы.
3. Откройте вкладку «Computed» в панели сведений об элементе.
4. Введите font-size в фильтр свойств. В строке появится вычисленный размер, например 16px.
5. Замените фильтр на margin-bottom. Для примера браузер покажет 16px.

Если значение отличается, проверьте шрифт родителя для em и значение font-size у html для rem. DevTools показывает результат каскада, поэтому ручной пересчет всей вложенности не нужен. Документация Chrome DevTools описывает работу инструментов разработчика.

Ошибки при выборе единиц CSS

Большинство ошибок появляется из-за смешения баз расчета. Исправляйте единицу у конкретного свойства, а не заменяйте все значения одним типом.

• font-size в px на html. Фиксированный корневой размер 16px отключает влияние обычной пользовательской настройки текста. Оставьте 100% или не задавайте размер корня без причины.
• Прием 62.5%. При базе 16px он делает 1rem равным 10px и упрощает устный расчет. Сторонние компоненты при этом получают измененную шкалу rem, поэтому прием требует единой договоренности проекта.
• Накопление em во вложенных списках. Каждый уровень с font-size в em меняет базу следующего. Для общей шкалы используйте rem, а em оставьте на уровне компонента.
• Медиазапросы в px. Порог в px не меняется вместе с начальным размером шрифта. Выбирайте em или rem, если раскладка должна учитывать увеличенный текст.
• Смешение em в font-size и padding. В font-size база лежит у родителя, в padding – у текущего элемента. Запишите обе базы перед переводом значения.

Шпаргалка по единицам CSS

• Оставляйте html зависимым от пользовательской настройки и стройте общую шкалу на rem.
• Используйте em для компонента, который должен расти вместе со своим шрифтом.
• Переводите px в rem делением на размер html, а rem в px – умножением на него.
• Для px to em делите размер на нужную базу: font-size – на шрифт родителя, padding и margin – на шрифт текущего элемента.
• Берите px для рамок и теней, line-height задавайте без единиц, результат проверяйте во вкладке Computed.

Совет от нашей редакции: сначала настройте корневую шкалу от 100%, затем добавляйте em только там, где отступы должны следовать за текстом. Увеличьте размер шрифта браузера и проверьте страницу до завершения верстки.