Back

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

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

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

Ключевые выводы

  • Единицы Rem относительны к размеру шрифта корневого элемента, что делает их идеальными для создания доступных дизайнов, учитывающих пользовательские предпочтения
  • Единицы пикселей — это измерения фиксированного размера, которые остаются постоянными независимо от пользовательских настроек
  • Преимущества доступности значительно склоняются в пользу единиц rem для размеров шрифтов и большинства свойств макета
  • Современные фреймворки как Bootstrap 5 и Material UI стандартизировали подходы на основе rem
  • Техника 62.5% упрощает расчеты rem, делая 1rem равным 10px

Понимание единиц 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 влияют на то, как ваши дизайны реагируют на пользовательские предпочтения и характеристики устройств:

ОсобенностьRemPx
Масштабирование с пользовательскими предпочтениями✅ Масштабируется при изменении размера шрифта в браузере❌ Остается фиксированным независимо от пользовательских настроек
Согласованность между вложенными элементами✅ Всегда относительно корневого элемента✅ Всегда согласованно
Сложность расчетов❌ Требует преобразования из спецификаций дизайна✅ Соответствует инструментам дизайна напрямую
Поддержка доступности✅ Учитывает предпочтения размера шрифта пользователя❌ Игнорирует предпочтения размера шрифта пользователя
Поведение при масштабировании браузера✅ Масштабируется правильно✅ Масштабируется правильно (в современных браузерах)

Преимущество доступности единиц 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 со стратегическим использованием пикселей там, где это уместно, вы создадите более доступные, удобные для пользователя дизайны, которые изящно адаптируются к различным устройствам и пользовательским предпочтениям.

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

Нет, нет значимой разницы в производительности между единицами rem и px. Современные браузеры эффективно вычисляют оба типа единиц.

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

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

Нет, это необязательно. Многие разработчики предпочитают ее, потому что она упрощает расчеты, но использование размера корневого шрифта браузера по умолчанию (обычно 16px) работает прекрасно.

Большинство современных CSS-фреймворков как Bootstrap 5 и Tailwind CSS уже используют единицы rem внутренне. Проверьте документацию вашего фреймворка для конкретных рекомендаций.

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

Большинство инструментов дизайна работают в пикселях. При реализации дизайнов вам нужно будет преобразовать значения пикселей в rem. Для стандартного корня 16px разделите на 16 (или умножьте на 0.0625). С техникой 62.5% разделите на 10.

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

Да, единицы rem хорошо работают с container queries. Container query установит точку останова на основе размера контейнера, в то время как единицы rem внутри этого контейнера все еще будут ссылаться на размер корневого шрифта.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers