Rem против Px: Когда и как использовать каждую единицу в современном CSS

При создании адаптивных веб-сайтов выбор правильных единиц CSS существенно влияет на то, как ваши дизайны адаптируются к различным устройствам и пользовательским предпочтениям. Дискуссия между использованием единиц rem и px продолжается уже много лет, но в контексте разработки 2024 года существуют четкие рекомендации о том, когда каждая из них уместна.

Понимание единиц CSS: Абсолютные против относительных

Прежде чем углубляться в сравнение rem против px, важно понять фундаментальную разницу между этими двумя типами единиц:

Абсолютные единицы

Пиксель (px) является абсолютной единицей в CSS. Когда вы устанавливаете размер шрифта элемента в 16px, он всегда будет именно такого размера, независимо от родительских элементов или пользовательских предпочтений.

.fixed-size {
  font-size: 16px;
  padding: 24px;
  width: 300px;
}

Относительные единицы

Rem (rem) — это относительная единица, которая масштабируется на основе размера шрифта корневого элемента. Название буквально означает “root em”. По умолчанию браузеры устанавливают корневой размер шрифта в 16px, делая 1rem равным 16px, если не изменено явно.

html {
  font-size: 16px; /* По умолчанию в большинстве браузеров */
}

.scalable-element {
  font-size: 1rem;    /* 16px по умолчанию */
  padding: 1.5rem;    /* 24px по умолчанию */
  width: 18.75rem;    /* 300px по умолчанию */
}

Rem против Px: Основные различия

Основные различия между единицами rem и px влияют на то, как ваши дизайны реагируют на пользовательские предпочтения и характеристики устройств:

Преимущество доступности единиц Rem

Самый сильный аргумент в пользу использования единиц rem сводится к доступности. Когда пользователи настраивают размер шрифта по умолчанию в своем браузере (обычная практика для людей с нарушениями зрения), дизайны, использующие единицы rem, будут учитывать эти предпочтения.

Вот простая демонстрация:

<div class="container">
  <p class="pixel-text">Этот текст 16px (фиксированный размер)</p>
  <p class="rem-text">Этот текст 1rem (масштабируется с предпочтениями)</p>
</div>

.pixel-text {
  font-size: 16px;
}

.rem-text {
  font-size: 1rem;
}

Когда пользователь увеличивает размер шрифта по умолчанию в браузере с 16px до 24px:

• pixel-text остается на 16px
• rem-text увеличивается до 24px (1 × 24px)

Это поведение критично для пользователей с нарушениями зрения, которые полагаются на более крупный текст. Согласно опросу WebAIM пользователей с пониженным зрением, более 75% сообщают об изменении размера шрифта по умолчанию в браузере.

Техника 62.5%: Упрощение расчетов Rem

Одна из распространенных жалоб на единицы rem заключается в том, что их сложнее рассчитать, чем пиксели. Размер корневого шрифта по умолчанию в 16px означает, что обычные значения как:

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 20px = 1.25rem

Эти десятичные значения менее интуитивны, чем работа с пикселями. Техника 62.5% решает это, устанавливая размер корневого шрифта в 10px, делая расчеты намного проще:

html {
  font-size: 62.5%; /* 62.5% от 16px = 10px */
}

.element {
  font-size: 1.6rem;  /* 16px */
  margin: 2.4rem;     /* 24px */
  padding: 0.8rem;    /* 8px */
}

С таким подходом вы можете мысленно преобразовывать между rem и пикселями, просто перемещая десятичную точку:

• 16px = 1.6rem
• 24px = 2.4rem
• 8px = 0.8rem

Эта техника сохраняет преимущества доступности, делая разработку более интуитивной.

Когда использовать единицы Rem

Единицы Rem идеальны для:

1. Типографики

body {
  font-size: 1rem;      /* Базовый размер шрифта */
}

h1 {
  font-size: 2.5rem;    /* Масштабируется с пользовательскими предпочтениями */
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;     /* Относительно размера шрифта */
}

2. Отступов макета

.container {
  max-width: 75rem;     /* 1200px при размере по умолчанию */
  padding: 2rem;
  margin: 0 auto;
}

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
}

3. Размеров компонентов

.button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

4. Медиа-запросов

/* Подход mobile-first */
.container {
  width: 100%;
}

/* Точка останова планшета */
@media (min-width: 48rem) {  /* 768px при размере по умолчанию */
  .container {
    width: 46rem;
  }
}

/* Точка останова десктопа */
@media (min-width: 64rem) {  /* 1024px при размере по умолчанию */
  .container {
    width: 60rem;
  }
}

Когда использовать единицы пикселей

Несмотря на преимущества rem, есть случаи, когда пиксели имеют больше смысла:

1. Ширина границ

.card {
  border: 1px solid #ddd;  /* Границы часто лучше выглядят в 1px */
}

2. Тени блоков

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Небольшие, точные эффекты */
}

3. Мелкие детали

.separator {
  height: 1px;
  background-color: #eee;
}

4. Когда критична точность пикселей

.pixel-art {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
}

Rem в современных дизайн-системах

Основные дизайн-системы и фреймворки в значительной степени стандартизировали единицы rem:

• Bootstrap 5 использует rem для большинства размеров с корневым размером шрифта 16px
• Material UI использует rem с поддержкой техники 62.5%
• Tailwind CSS предлагает шкалы отступов на основе rem по умолчанию

Этот сдвиг в индустрии отражает растущий акцент на доступности и адаптивном дизайне.

Практическая стратегия реализации

Для новых проектов рассмотрите такой подход:

1. Установите базовый размер шрифта используя технику 62.5%:

   html {
     font-size: 62.5%;
   }
   
   body {
     font-size: 1.6rem; /* Сброс к эквиваленту 16px */
   }

2. Используйте rem для большинства свойств:

   .container {
     max-width: 120rem;  /* 1200px */
     padding: 2rem;      /* 20px */
   }

3. Используйте пиксели для мелких деталей:

   .card {
     border: 1px solid #ddd;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

4. Тестируйте с разными размерами шрифта браузера, чтобы убедиться, что ваш дизайн масштабируется соответствующим образом.

Преобразование существующего проекта с Px на Rem

Если вы переводите существующий проект с пикселей на единицы rem:

1. Определитесь со стратегией размера корневого шрифта (по умолчанию 16px или техника 62.5%)

2. Создайте функцию преобразования в вашем препроцессоре:

   // Используя SCSS
   @function rem($pixels) {
     @return ($pixels / 16) * 1rem;
   }
   
   .element {
     font-size: rem(16);    // 1rem
     margin: rem(24);       // 1.5rem
     padding: rem(8) rem(16); // 0.5rem 1rem
   }

3. Начните с типографики и свойств макета, затем расширьте на другие свойства

4. Тщательно тестируйте на разных устройствах и настройках браузера

Распространенные подводные камни и решения

1. Вложенные элементы с Rem

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

/* С единицами em (проблематично) */
.parent {
  font-size: 1.2em;
}
.parent .child {
  font-size: 1.2em; /* Вычисляется как 1.44 раза базовый размер шрифта */
}

/* С единицами rem (согласованно) */
.parent {
  font-size: 1.2rem;
}
.parent .child {
  font-size: 1.2rem; /* Все еще 1.2 раза размер корневого шрифта */
}

2. Поведение медиа-запросов

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

html {
  font-size: 62.5%; /* Устанавливает 1rem = 10px для обычного CSS */
}

@media (min-width: 64rem) { /* Все еще оценивается как 1024px (64 × 16px) */
  /* Стили здесь */
}

3. Соображения поддержки браузерами

Хотя единицы rem имеют отличную поддержку в современных браузерах, вам могут понадобиться запасные варианты для очень старых браузеров:

.element {
  font-size: 16px;      /* Запасной вариант для древних браузеров */
  font-size: 1rem;      /* Современные браузеры будут использовать это */
}

Заключение

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

Принимая подход rem-first со стратегическим использованием пикселей там, где это уместно, вы создадите более доступные, удобные для пользователя дизайны, которые изящно адаптируются к различным устройствам и пользовательским предпочтениям.

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