PrepBro
← Назад к вопросам

Что такое rem?

1.0 Junior🔥 201 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое rem

rem (root em) - это единица измерения в CSS, которая зависит от размера шрифта корневого элемента (html). Это одна из самых важных единиц в современном веб-дизайне.

rem vs em vs px

Для понимания rem нужно знать разницу между единицами:

px (пиксели)

  • Абсолютная единица
  • Всегда один пиксель, независимо от контекста
  • Не масштабируется
.button {
  font-size: 16px; /* Всегда 16 пиксель */
  padding: 8px;    /* Всегда 8 пиксель */
}

em (эм)

  • Относительная единица
  • Зависит от font-size родителя
  • Может быть вложенной (em зависит от em родителя)
.container {
  font-size: 16px;
}

.container p {
  font-size: 1.5em; /* 16px * 1.5 = 24px */
  padding: 1em;     /* 24px * 1 = 24px */
}

.container .nested {
  font-size: 1.5em; /* 24px * 1.5 = 36px (!!) */
  padding: 1em;     /* 36px * 1 = 36px */
}

rem (root em)

  • Относительная единица
  • ВСЕГДА зависит от font-size элемента <html>
  • Предсказуемая, не вложенная
htmly {
  font-size: 16px; /* базовый размер */
}

.container {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
  padding: 1rem;     /* 16px * 1 = 16px */
}

.container .nested {
  font-size: 1.5rem; /* 16px * 1.5 = 24px (НЕ 36px!) */
  padding: 1rem;     /* 16px * 1 = 16px */
}

Почему rem лучше

Предсказуемость с em нужно помнить font-size всех родителей. с rem просто:

/* Я знаю, что html { font-size: 16px } */
/* Значит 1rem = 16px везде */

.button {
  font-size: 1rem;     /* 16px */
  padding: 0.5rem;     /* 8px */
  border-radius: 0.5rem; /* 8px border-radius */
}

.heading {
  font-size: 2rem;     /* 32px */
  margin-bottom: 1.5rem; /* 24px */
}

Масштабируемость для разных устройств Можно изменить базовый размер для мобильных:

/* Desktop */
html {
  font-size: 16px;
}

/* Мобильный */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* Все размеры пропорционально уменьшатся */
  }
}

.heading {
  font-size: 2rem; /* Desktop: 32px, Mobile: 28px */
}

Инклюзивность Когда пользователь увеличивает размер шрифта в браузере, rem масштабируется.

/* Пользователь установил zoom 125% */
/* html { font-size: 16px * 1.25 = 20px } */
/* .button { font-size: 1rem } => 20px */

с px этого не будет:

.button {
  font-size: 16px; /* Остается 16px, не масштабируется */
}

Рекомендуемая стратегия

Шаг 1: Установить базовый размер

html {
  font-size: 16px; /* Стандарт для большинства браузеров */
}

**Шаг 2: Использовать rem для:

  • Font sizes
  • Margins и Padding
  • Border radius
  • Letter spacing
  • Line height
.card {
  font-size: 1rem;        /* 16px */
  padding: 1.5rem;        /* 24px */
  border-radius: 0.5rem;  /* 8px */
  margin-bottom: 2rem;    /* 32px */
  line-height: 1.5;       /* unitless ratio */
}

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

**Шаг 3: Использовать px ТОЛЬКО для:

  • Borders (0.5px, 1px, 2px)
  • Box shadows (иногда)
  • Media queries (браузер автоматически конвертирует px в rem)
.input {
  border: 1px solid #ccc; /* px допустимо здесь */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Практический пример: Design System с rem

// Tailwind CSS использует rem по умолчанию
// Если нужны кастомные размеры:

module.exports = {
  theme: {
    fontSize: {
      'xs': '0.75rem',   /* 12px */
      'sm': '0.875rem',  /* 14px */
      'base': '1rem',    /* 16px */
      'lg': '1.125rem',  /* 18px */
      'xl': '1.25rem',   /* 20px */
      '2xl': '1.5rem',   /* 24px */
      '3xl': '1.875rem', /* 30px */
      '4xl': '2.25rem',  /* 36px */
    },
    spacing: {
      '0': '0',
      '1': '0.25rem',   /* 4px */
      '2': '0.5rem',    /* 8px */
      '3': '0.75rem',   /* 12px */
      '4': '1rem',      /* 16px */
      '5': '1.25rem',   /* 20px */
      '6': '1.5rem',    /* 24px */
    },
    borderRadius: {
      'sm': '0.25rem',  /* 4px */
      'base': '0.5rem', /* 8px */
      'md': '0.75rem',  /* 12px */
      'lg': '1rem',     /* 16px */
    },
  },
};

Часто задаваемые вопросы

Q: Может ли html быть не 16px? Да, но это редко. Браузеры по умолчанию используют 16px. Некоторые устанавливают меньше для мобильных.

Q: Почему не использовать везде em? Потому что em вложенный, и легко потеряться в расчетах. rem предсказуемый.

Q: А что с другими единицами (ch, vw, vh)? Они для специфических случаев:

  • ch - ширина символа (для моноширинного текста)
  • vw - 1% ширины viewport
  • vh - 1% высоты viewport

Заключение

rem - это:

  1. Относительная единица, зависящая от html font-size
  2. Предсказуемая и не вложенная (в отличие от em)
  3. Позволяет масштабировать весь интерфейс одним параметром
  4. Улучшает доступность (accessibility)
  5. Стандарт для modern веб-дизайна

Используйте rem для всех размеров шрифтов и расстояний (padding, margin), и ваш код будет более гибким и масштабируемым.

Что такое rem? | PrepBro