При вёрстке сайтов многие современные проекты используют относительную единицу rem вместо фиксированных пикселей, особенно для размеров шрифта и отступов. Калькулятор выше переводит значение в пикселях в rem с учётом заданного базового размера шрифта.
Формула перевода px в rem
Расчёт строится на простом делении значения в пикселях на базовый размер шрифта корневого элемента страницы:
rem = px ÷ Базовый размер шрифта (px)
По умолчанию базовый размер шрифта в большинстве браузеров равен 16px, поэтому наиболее частый вариант формулы выглядит как деление на 16.
Пример: перевод заголовка
Заголовок на сайте должен иметь размер 32px при стандартном базовом размере шрифта 16px.
rem: 32 ÷ 16 = 2rem. Пример показателен: для своих данных повторите те же действия в том же порядке.
Пример: перевод при нестандартном базовом размере
Некоторые проекты переопределяют базовый размер шрифта, например, на 10px для удобства мысленных расчётов (тогда 1rem соответствует 10px, а 2,4rem - 24px). Переведём значение 14px при таком базовом размере.
rem: 14 ÷ 10 = 1,4rem.
Этот пример показывает, что результат перевода px в rem напрямую зависит от установленного базового размера шрифта конкретного проекта, а не является фиксированным соотношением.
Таблица частых значений px в rem при базе 16px
- 8px - 0,5rem
- 12px - 0,75rem
- 14px - 0,875rem
- 16px - 1rem
- 20px - 1,25rem
- 24px - 1,5rem
- 32px - 2rem
- 48px - 3rem
Такая таблица удобна для быстрой сверки при вёрстке, когда дизайн-макет предоставлен в пикселях, а стили сайта пишутся в rem, что сегодня довольно частая практика в веб-разработке.
Почему для доступности сайта важен именно rem, а не px
Значения в rem, в отличие от фиксированных px, пересчитываются автоматически, если пользователь изменил базовый размер шрифта в настройках своего браузера - например, из-за проблем со зрением увеличил стандартный масштаб текста. Сайт, свёрстанный полностью в px, останется визуально прежним при таких настройках пользователя, а элементы, размер которых задан в rem, пропорционально увеличатся вместе с изменённым базовым размером шрифта. Именно поэтому современные рекомендации по доступности веб-интерфейсов часто советуют использовать rem как минимум для размеров шрифта, а по возможности - и для многих других размеров на странице.
Инструменты для автоматизации перевода px в rem
Многие среды разработки и препроцессоры CSS (например, Sass) позволяют настроить автоматическую функцию перевода пикселей в rem, чтобы не считать каждое значение вручную при написании стилей. Разработчик указывает значение в удобных пикселях прямо в коде, а специальная функция или плагин сборки автоматически конвертирует его в rem с учётом заданного базового размера шрифта проекта. Такой подход сочетает удобство работы с привычными пикселями на этапе написания кода и преимущества относительных единиц в итоговых, скомпилированных стилях сайта.
Таблица перевода пикселей в rem при базе 16 px
| Пиксели | rem | em при базе 16 px |
|---|---|---|
| 8 | 0,500 | 0,500 |
| 12 | 0,750 | 0,750 |
| 14 | 0,875 | 0,875 |
| 16 | 1,000 | 1,000 |
| 18 | 1,125 | 1,125 |
| 24 | 1,500 | 1,500 |
| 32 | 2,000 | 2,000 |
| 48 | 3,000 | 3,000 |
Округление значений rem при переводе
При переводе px в rem результат далеко не всегда получается круглым и удобным числом - например, 15px при базе 16px даёт 0,9375rem. В большинстве случаев такое дробное значение можно смело использовать в коде без округления, поскольку современные браузеры точно обрабатывают дробные значения размеров. Для читаемости кода некоторые команды всё же сознательно подбирают исходные значения в px так, чтобы результат в rem получался более круглым, например, кратным 0,25rem или 0,5rem, что упрощает восприятие стилей при последующем чтении и редактировании кода другими разработчиками.