Что такое CSS Rem: простое объяснение с примерами и сравнением с em

hannadev

CSS Rem — это единица измерения, которая упрощает верстку. Она всегда привязана к размеру шрифта корневого элемента html, обычно 16px по умолчанию. С rem проще делать адаптивные сайты, потому что все размеры масштабируются от одной точки.

Это решает проблемы с непредсказуемыми отступами и шрифтами, когда используешь px или em. Один раз меняешь базовый font-size — и вся страница подстраивается. Полезно для мобильных устройств и когда нужно быстро править дизайн.

Как работает rem в CSS

Rem расшифровывается как root em — корневой em. В отличие от обычных пикселей, rem зависит только от font-size элемента <html>. Если в html стоит font-size: 16px, то 1rem всегда равен 16px, независимо от родителей.

Представь ситуацию: у тебя контейнер с font-size 20px, внутри параграф с 1.5rem. С rem параграф будет 24px (1.5 * 16px), а не 30px. Это исключает накопление ошибок в вложенных элементах. Такой подход делает код предсказуемым и легким для отладки.

Далее логично посмотреть на примеры. Вот базовая настройка:

Установи в html: font-size: 16px; — это базовый размер для всего сайта.
Для заголовка h1: font-size: 2.5rem; — получится 40px.
Отступы: padding: 1.5rem; — 24px везде, где применено.

Свойство	Значение в rem	Эквивалент в px (при 16px базовом)
font-size	1rem	16px
margin	2rem	32px
padding	0.5rem	8px

rem против em и px: ключевые различия

Em зависит от размера шрифта непосредственного родителя, что часто приводит к сюрпризам. Если родитель 20px, то 2em внутри — 40px, а если внук добавит свой em, расчеты усложняются. Rem же всегда смотрит на html, игнорируя цепочку.

Px — фиксированные, не масштабируются при зуме или смене настроек пользователя. Rem гибче: пользователь увеличит font-size в браузере — весь сайт подстроится. Это критично для доступности. Em хорош для локальных компонентов, как кнопки, где нужно пропорциональное масштабирование внутри группы.

Сравним на практике:

px: font-size: 16px; — статично, не меняется при зуме.
em: В родителе 20px, ребенок 1.2em — 24px; внук 1.2em — 28.8px (накопление!).
Нюанс: em полезен для padding в компонентах, чтобы они росли вместе с текстом.

Единица	От чего зависит	Плюсы	Минусы
px	Фиксированное значение	Точная верстка	Не адаптивно
em	Родительский font-size	Локальное масштабирование	Накопление эффекта
rem	Корневой html font-size	Предсказуемость, глобальность	Нужно задавать базовый размер

Когда и как применять rem на практике

Rem идеален для глобальных стилей: типографика, отступы контейнеров, сетки. Меняешь font-size в html на 18px для больших экранов — все rem подхватят. Это упрощает медиа-запросы в адаптивной верстке.

Пример адаптивного контейнера: .container { padding: 2rem; margin: 1rem; }. На десктопе с 16px — 32px/16px, на мобильном меняешь html на 14px — автоматически 28px/14px. Добавь JavaScript для динамического font-size по ширине экрана — и сайт идеально подстроится.

Практические советы:

Всегда задавай html { font-size: 16px; } или 62.5% (для 10px базового, удобно считать).
Используй rem для h1–h6: h1 { font-size: 2.5rem; } — пропорционально.
Комбинируй с em локально: в кнопке padding: 0.5em; для синхронизации с текстом.
Тестируй зум: в браузере Ctrl+ и проверь масштабирование.

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

.card {
  padding: 2rem;
  font-size: 1.1rem;
}

rem в реальных проектах: подводные камни

В больших проектах rem упрощает командную работу — все опираются на один базис. Но если забудешь задать font-size в html, браузер возьмет 16px по умолчанию. Это плюс, но проверь в разных браузерах: старые версии могут варьировать.

Компоненты вроде модальных окон: задай им локальный font-size в rem, чтобы они не ломались. Интеграция с фреймворками (Bootstrap) — там rem уже вшит. Проблема: в email-шаблонах rem слабо поддерживается, там лучше px.

Что учесть дальше:

Переход от px к rem: найди все font-size, margin/padding и конвертируй (16px = 1rem).
Динамический root: html { font-size: calc(100vw / 120); } для fluid-типографики.
Сочетание с clamp: font-size: clamp(1rem, 4vw, 2rem); — идеал для современного веба.

Почему rem меняет подход к верстке

Rem делает CSS системным: один рычаг для всего. Ты избегаешь хаоса с вложенностью, как в em, и жесткости px. Остается поэкспериментировать с vh/vw для высоты или ch для моноширинных текстов.

В итоге, rem — не панацея, но основа хорошей верстки. Подумать стоит над комбинацией с современными единицами вроде lvh или hybrid-системами в Tailwind.