Home » CSS единицы rem и em — различия и лучшие случаи использования

CSS единицы rem и em — различия и лучшие случаи использования

Если вы когда-нибудь возились с CSS для админок, мониторинговых интерфейсов или собственных веб-панелей управления серверами, то наверняка сталкивались с проблемой адаптивности. Особенно когда ваш дашборд должен одинаково хорошо отображаться на мониторе в датацентре и на планшете в дороге. Вот здесь и приходят на помощь относительные единицы CSS — rem и em. Эта статья поможет вам разобраться в их различиях и научиться правильно их применять для создания действительно гибких интерфейсов.

Как работают rem и em — базовые принципы

Прежде чем начать экспериментировать, давайте разберёмся в механизме работы этих единиц. Обе они относительные, но относительность у них разная:

em — вычисляется относительно размера шрифта родительского элемента
rem — вычисляется относительно размера шрифта корневого элемента (html)

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

Пошаговая настройка и базовые примеры

Начнём с простого примера. Создадим базовую разметку для панели мониторинга:

/* Устанавливаем базовый размер шрифта для всего документа */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* Основной контейнер */
.dashboard {
  padding: 2rem; /* 32px */
  margin: 1rem; /* 16px */
}

/* Заголовок секции */
.section-title {
  font-size: 1.5rem; /* 24px */
  margin-bottom: 1rem; /* 16px */
}

/* Карточка с метрикой */
.metric-card {
  padding: 1rem; /* 16px */
  margin: 0.5rem; /* 8px */
  border-radius: 0.25rem; /* 4px */
}

А теперь пример с em для создания масштабируемого компонента:

/* Кнопка, которая масштабируется относительно своего размера */
.server-button {
  font-size: 1rem; /* базовый размер */
  padding: 0.5em 1em; /* 8px 16px при font-size: 1rem */
  border-radius: 0.25em; /* 4px */
  margin: 0.25em; /* 4px */
}

/* Большая кнопка - увеличиваем только font-size */
.server-button--large {
  font-size: 1.25rem; /* все размеры автоматически увеличатся */
}

/* Маленькая кнопка */
.server-button--small {
  font-size: 0.875rem; /* все размеры автоматически уменьшатся */
}

Сравнительная таблица rem vs em

Характеристика	rem	em
Относительность	Корневой элемент (html)	Родительский элемент
Предсказуемость	Высокая	Может усложняться при вложенности
Масштабируемость	Глобальная	Локальная (компонентная)
Лучше для	Общих отступов, размеров	Компонентов, типографики
Сложность расчёта	Простая	Может накапливаться

Практические кейсы и примеры использования

✅ Хорошие примеры использования rem

Глобальные отступы и размеры — отлично для создания консистентной сетки
Размеры иконок в интерфейсах — легко масштабировать весь интерфейс
Брейкпоинты в медиа-запросах — адаптивность привязана к базовому размеру

/* Адаптивная панель управления сервером */
.server-control-panel {
  width: 100%;
  max-width: 60rem; /* 960px при базовом размере 16px */
  margin: 0 auto;
  padding: 2rem;
}

.status-indicator {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

@media (max-width: 48rem) { /* 768px */
  .server-control-panel {
    padding: 1rem;
  }
}

✅ Хорошие примеры использования em

Padding и margin внутри компонентов — автоматически масштабируются с размером шрифта
Размеры кнопок и форм — пропорции остаются идеальными
Типографические элементы — отступы между абзацами, размеры строк

/* Масштабируемая форма логина */
.login-form {
  font-size: 1rem;
}

.login-input {
  font-size: 1em;
  padding: 0.75em 1em;
  margin-bottom: 1em;
  border: 0.0625em solid #ccc;
  border-radius: 0.25em;
}

.login-button {
  font-size: 1em;
  padding: 0.875em 2em;
  border-radius: 0.25em;
}

/* Для мобильных устройств просто увеличиваем font-size формы */
@media (max-width: 768px) {
  .login-form {
    font-size: 1.125rem; /* все элементы автоматически увеличатся */
  }
}

❌ Что не стоит делать

Избегайте em для многоуровневых вложенностей — эффект накопления может дать неожиданные результаты
Не используйте rem для элементов, которые должны масштабироваться относительно содержимого
Не смешивайте единицы без понимания последствий

/* Плохо - эффект накопления */
.parent {
  font-size: 1.2em; /* 19.2px при базовом 16px */
}

.child {
  font-size: 1.2em; /* 23.04px (19.2 * 1.2) */
}

.grandchild {
  font-size: 1.2em; /* 27.65px (23.04 * 1.2) */
}

Интересные факты и нестандартные способы использования

Вот несколько крутых приёмов, которые могут пригодиться при создании интерфейсов:

Трюк с CSS-переменными и rem

:root {
  --base-font-size: 16px;
  --scale-factor: 1;
}

html {
  font-size: calc(var(--base-font-size) * var(--scale-factor));
}

/* Теперь можно динамически изменять масштаб через JavaScript */
.large-ui {
  --scale-factor: 1.2;
}

.small-ui {
  --scale-factor: 0.9;
}

Адаптивная типографика с em

/* Заголовки, которые автоматически подстраиваются */
.adaptive-heading {
  font-size: 2em;
  line-height: 1.2em;
  margin-bottom: 0.5em;
}

/* При изменении размера контекста всё масштабируется */
@media (max-width: 768px) {
  .content-area {
    font-size: 0.9rem; /* заголовки автоматически уменьшатся */
  }
}

Автоматизация и скрипты

Для автоматизации работы с rem и em можно использовать препроцессоры. Вот несколько полезных миксинов для Sass:

// Функция для конвертации px в rem
@function rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

// Миксин для адаптивного размера шрифта
@mixin responsive-font($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
  font-size: rem($min-size);
  
  @media (min-width: $min-width) {
    font-size: calc(#{rem($min-size)} + #{($max-size - $min-size)} * ((100vw - #{$min-width}) / #{($max-width - $min-width)}));
  }
  
  @media (min-width: $max-width) {
    font-size: rem($max-size);
  }
}

// Использование
.dashboard-title {
  @include responsive-font(24px, 48px);
}

Для автоматической оптимизации CSS можно использовать PostCSS плагины:

// package.json
{
  "devDependencies": {
    "postcss-pxtorem": "^6.0.0"
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    })
  ]
}

Мониторинг и отладка

Для отладки размеров в DevTools можно использовать следующий snippet:

// Показать computed values для всех элементов с rem/em
Array.from(document.querySelectorAll('*')).forEach(el => {
  const styles = getComputedStyle(el);
  if (styles.fontSize.includes('rem') || styles.fontSize.includes('em')) {
    console.log(el, {
      fontSize: styles.fontSize,
      computed: styles.getPropertyValue('font-size')
    });
  }
});

Производительность и оптимизация

Интересный факт: браузеры обрабатывают rem быстрее, чем em, поскольку не нужно каждый раз пересчитывать значения относительно родительского элемента. Это особенно заметно на слабых устройствах с большим количеством DOM-элементов.

Если вы разрабатываете интерфейс для мониторинга серверов, который должен работать на старых компьютерах в серверной, используйте rem для основных размеров и em только там, где действительно нужно компонентное масштабирование.

Заключение и рекомендации

Выбор между rem и em зависит от конкретной задачи:

Используйте rem для: глобальных размеров, сеток, отступов между крупными блоками, медиа-запросов
Используйте em для: внутренних отступов компонентов, кнопок, форм, типографики
Комбинируйте разумно: rem для структуры, em для деталей

Помните, что создание отзывчивого интерфейса — это не только про CSS. Если вы разрабатываете серьёзные веб-приложения для управления серверами, вам понадобится надёжный хостинг. Для разработки и тестирования отлично подойдёт VPS сервер, а для продакшена с высокими нагрузками стоит рассмотреть выделенный сервер.

Главное правило: всегда тестируйте ваши решения на разных устройствах и разрешениях. Особенно если речь идёт о критически важных интерфейсах мониторинга, где каждый пиксель может иметь значение.

Подробнее о CSS единицах можно почитать в официальной документации: MDN Web Docs.

В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.

Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.