Опубликовано:

CSS единицы измерения: em и rem

Источник: «rem vs em - Everything you need to know»
Рассмотрим, что такое em и rem, чем они отличаются, когда и как их использовать, и практические примеры использования.

Введение

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

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

Что такое em и rem

В CSS em и rem представляют относительные единицы измерения, отображающие масштабируемые и отзывчивые результаты.

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

В статье мы рассмотрим всё, что связано с em и rem, их различия, когда и как их использовать, и практические примеры использования.

Предварительные требования

Предполагается, что читатель статьи хорошо разбирается в CSS. Хотя вы не обязаны быть богом CSS (привет Kevin Powell), будет полезно, если основные термины CSS не будут смущать.

CSS единицы измерения em и rem в CSS

Когда мы ищем способы указания длины в CSS, выбор довольно велик. Все единицы измерения длины в CSS делятся на две категории.

Что такое em в CSS

Как уже говорилось выше, em в CSS — это относительные единицы измерения, используемые для определения размера элементов на веб-странице, в основном размер шрифта. Поскольку единица измерения относительна по отношению к родительскому элементу, 1em равна font-size, установленному в родительском элементе.

Это означает, что если вы установите font-size в родительском div в 20px и установите font-size в дочернем div в 2em, font-size в дочернем div будет равен 40px. Вот пример.

Напишем HTML код:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="parent">
    I'm parent div set to 20px
    <div class="child">
        I'm the child div set to 2em, i.e 40px.
    </div>
   </div>
</body>
</html>

И CSS:

.parent{
    font-size: 20px;
}

.child{
    font-size: 2em;
}

p {
    font-size: 1.5em;
 }

Вот, что у нас получилось:

See the Pen

Единица измерения em удобна тем, что позволяет регулировать размер элементов на странице на основе font-size ранее указанного элемента, что помогает создать последовательную визуальную иерархию. Это удобно при создании доступных веб-сайтов, легко читаемых пользователями с нарушениями зрения.

Важно отметить, что если не указать значение родительского элемента, то в качестве родительского элемента будет использоваться значение браузера по умолчанию.

p {
    font-size: 1.5em;
}

В этом примере свойство font-size установлено в 1,5em, это означает, что размер текста в элементе <p> будет в 1,5 раза больше размера шрифта по умолчанию в браузере, если нет прямого родительского элемента.

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

С помощью соответствующих свойств CSS единицы измерения em можно использовать для задания размеров других элементов, таких как margin, padding и border.

Что такое rem в CSS

Теперь, когда мы знаем, что такое em, рассмотрим rem. rem — ещё одна единица измерения длины в CSS, обозначающая «root em» или «корневой em». Поскольку мы знаем, что em равен размеру текущего шрифта, можно сделать вывод, что «root em» относится к размеру шрифта root/корневого элемента, обычно это элемент <html>.

Запутались? Давайте рассмотрим подробнее.

Как и em, rem наследует свой размер от родительского элемента, но родительский элемент, на который смотрит rem, — это не div или section над ним, а самый первый элемент, окружающий его, то есть элемент html. Давайте рассмотрим пример, используя предыдущий код. Тот же html-код, только с дополнительным div.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="parent">
    I'm parent div set to 20px
    <div class="child">
        I'm the child div set to 2em, i.e 40px.
    </div>
    <div class="child-2">
        I'm the child div set to 2em, i.e 60px.
    </div>
   </div>
</body>
</html>

И добавим к предыдущему CSS коду следующий фрагмент:

html{
    font-size: 30px;
}

.child-2{
   font-size: 2rem;
}

Результат будет таким:

See the Pen

Как видите, несмотря на то, что <div class="child"> находится внутри другого div, он обращается к элементу html, чтобы унаследовать его размер шрифта.

Использование единицы измерения rem позволяет более гибко масштабировать элементы на странице, так как если изменить font-size корневого элемента, все элементы с единицей измерения rem будут автоматически обновлены, сохранив свой относительный размер.

Расширенное использование em и rem

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

Вот несколько продвинутых стратегий использования em и rem:

Составное масштабирование с em

Используя em, можно создавать сложные эффекты масштабирования внутри вложенных элементов. Если задать родительскому элементу размер шрифта 2em, а дочернему элементу — 1.5em, размер шрифта дочернего элемента будет в 1,5 раза больше размера родительского, создавая масштабируемую иерархию.

.parent {
  font-size: 2em;
}

.child {
  font-size: 1.5em; /* Получится 1,5 * 2em = 3em */
}

Отзывчивая типографика с rem

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

html {
  font-size: 16px; /* Размер шрифта корневого элемента по умолчанию */
}

@media (max-width: 600px) {
  html {
    font-size: 14px; /* Меньший размер шрифта для маленьких экранов */
  }
}

body {
  font-size: 1rem; /* 1rem = 16px по умолчанию, 14px на маленьких экранах */
}

padding и margin с rem

Можно использовать rem для padding и margin, поддерживая постоянный интервал на экранах разных размеров. Такой подход гарантирует, что интервалы будут масштабироваться соответствующим образом при изменении размера шрифта корневого элемента.

.container {
  padding: 2rem; /* padding будет масштабироваться с размером шрифта корневого элемента */
  margin: 1rem auto;
}

Комбинирование em и rem

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

.global {
  font-size: 1rem; /* Относительно корневого элемента */
}

.component {
  font-size: 1.5em; /* Относительно родительского элемента, в данном случае .global */
}

Создание модульного масштабирования

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

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.h1 {
  font-size: 3rem; /* 48px */
}

.h2 {
  font-size: 2.25rem; /* 36px */
}

.h3 {
  font-size: 1.5rem; /* 24px */
}

Используя эти продвинутые техники, можно создавать более адаптируемые и визуально последовательные дизайны.

Разница между em и rem

Теперь вы знаете различия между em и rem, но для большей ясности хочу повторить разницу между обоими значениями.

В CSS rem относится только к корневому элементу документа, а em — только к непосредственному родителю целевого элемента. Это означает, что размеры em наследуются от родительских элементов, в то время как размеры rem наследуются только от корневого элемента.

Когда использовать em, а когда rem

Для глобальных значений, таких как font-size, margin и padding, лучше использовать rem, если необходимо задать размер шрифта для всего документа, чтобы он масштабировался равномерно, а не зависел от размеров шрифта родительских элементов.

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

Возможные проблемы использования em и rem

em и rem, безусловно, лучшие единицы измерения, используемые в настоящее время при определении длины, но, как и всё в жизни, они не идеальны. Существует несколько проблем, с которыми можно столкнуться при использовании:

В целом, хотя em и rem могут быть удобны в определённых ситуациях, важно тщательно рассмотреть их потенциальные недостатки и понять, являются ли они лучшим выбором для вашего проекта.

Вопросы доступности

Позвольте поделиться идеями о том, как сделать веб-дизайн более доступным, используя такие единицы измерения, как em и rem. Особенно важно учитывать, как контент будет восприниматься людьми с ограниченными возможностями.

Масштабируемые размеры шрифта

Благодаря использованию относительных единиц измерения, таких как em или rem, текст на веб-странице может быть увеличен или уменьшен в соответствии с потребностями пользователя. Это удобно людям с нарушениями зрения, предпочитающих более крупный шрифт для комфортного чтения. Современные браузеры с лёгкостью масштабируют относительные единицы измерения, в отличие от абсолютных.

Последовательные отступы

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

Отзывчивый дизайн

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

Макет автоматически подстраивается под размер экрана, так как размеры экранов могут быть разными. Это важно, потому что пользователи работают с различными устройствами и могут использовать вспомогательные технологии.

Предпочтения пользователя

Некоторые пользователи устанавливают в браузере размер шрифта, отличный от стандартного, чтобы повысить удобство чтения. При разработке дизайна с использованием rem учитываются стили пользователей, и наш контент остаётся доступным.

Уменьшение движения и отвлечения внимания

em и rem позволяют изменять размеры и расположение элементов, уменьшая ненужные движения и визуальное отвлечение внимания, представляющие сложность для пользователей с нарушениями внимания. Одним словом, мы используем em и rem в CSS, чтобы сделать дизайн более доступным и удобным для пользователя. Это такой маленький, но мощный способ использования инклюзивного и адаптивного дизайна для удовлетворения более широкого круга потребностей пользователей.

Влияние на производительность

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

Reflow и repaint

При использовании em браузеру приходится рассчитывать размеры относительно родительских элементов. Это может привести к reflow и repaint при глубокой вложенности структур. Это одна из причин, по которой использование rem может быть менее сложным; в этом случае все вычисления производятся только относительно корневого элемента.

Соблюдение последовательности

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

Использование памяти

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

CSS вычисления

Браузер вычисляет размеры и позиции элементов, используемых в CSS-вычислениях. Это делает использование em более сложным, так как в каждом случае они зависят от родительского элемента. С другой стороны, rem в своих вычислениях имеет только одну точку отсчёта, что делает его гораздо более простым и, следовательно, ускоряет процесс.

Стабильность макета

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

Читаемость и сопровождение

Использование rem позволит сделать таблицу стилей более удобной для чтения и сопровождения. Глобальное определение базового значения делает размер элементов предсказуемым и наглядным в таблицах стилей. Это позволит сократить часы, потраченные на отладку проблем с вёрсткой, и сделает разработку намного продуктивнее.

Рассмотрим этот пример, чтобы наглядно продемонстрировать сказанное выше:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  padding: 2rem; /* Браузеру легче вычислить */
  margin: 1rem auto;
}

.child {
  font-size: 1.5em; /* Меньше работы браузеру по вычислению */
}

Заключение

Поздравляем, что вы добрались до этого места! Теперь вы знаете всё, что нужно знать об em и rem и зачем они нужны. Хотя они оба похожи, но всё же заметно отличаются друг от друга, и относиться к ним нужно соответственно.

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

Предыдущая Статья

PHP: Редирект 301 и 302

Следующая Статья

Laravel: Использование генераторов для пагинации