Использование em против rem в CSS

Автор Лоуренс Иглс ✏️

Основная функция CSS заключается в том, чтобы позволить браузерам стилизовать элементы HTML. CSS делает это путем присвоения определенных значений свойствам, таким как фон, цвет, размер шрифта, margin, padding и т.д.

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

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

• Справочная информация
• Значения длины
• Что такое em и rem и зачем их использовать?
• em против rem
• Проблемы при работе с em и rem
  • Наследование значений em

Справочная информация

Синтаксис CSS довольно прост, и, как мы уже обсуждали ранее, включает в себя присвоение значений свойствам элементов HTML. Пара свойство-значение называется объявлением CSS.

Рассмотрим приведенный ниже код:

h1 {
  color: black;
  background-color: rgb(190,43,111,0.5);
  font-weight: 800;
  font-size: 1.5rem;
  padding: 4em;
  margin: 10px;
  weight: 100%;
  height: 100vh;
}

Этот код показывает CSS-объявление, которое стилизует элемент h1 веб-страницы, присваивая определенные значения некоторым свойствам элемента. Мы видим, что некоторым свойствам, таким как font-size, padding и margin, присвоены числовые значения.

В CSS существуют различные типы числовых значений:

• Целое число: целые числа, например, значение 800, присвоенное свойству font-weight выше.
• Числа: десятичные числа, например, значение альфа, переданное в выражение функции rgb() выше. Значение альфа равно 0.5, что означает 50-процентную непрозрачность.
• Проценты: например, 100%, присвоенные свойству weight.
• Размеры: числа с единицами измерения, такие как 1.5rem, 10px или 100vh. Размеры подразделяются на длину, угол, время и разрешение. В наших примерах каждый из размеров (em, px, rem и vh) относится к категории длины.

Значения длины

Значения длины — это типы данных CSS, назначаемые свойствам CSS, таким как weight, height, margin, padding и font-size. Значения длины могут быть абсолютными или относительными.

Абсолютные значения длины — это фиксированные единицы, такие как px. Они не являются относительными и ни от чего не зависят.

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

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

Теперь мы более подробно рассмотрим em и rem. Давайте начнем!

Что такое em и rem и зачем их использовать?

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

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

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

em против rem

em и rem похожи, потому что они оба являются масштабируемыми единицами. Их значения всегда соотносимы со значением чего-то другого.

Наиболее заметно, что em и rem отличаются тем, как браузер преобразует их в px.

Как уже упоминалось, значения em относятся к font-size ближайшего родительского элемента, а значения rem относятся к корневому font-size, или font-size элемента html. Когда корневой font-size явно не задан, значения rem являются относительными к стандартному font-size браузера, равному 16px.

Это означает, что если корневой font-size равен 16px, то значение 1rem будет равно 16px * 1 = 16px. А значение 10rem будет 16px * 10 = 160px.

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

/* Root font-size on the document level */
html {
  font-size: 20px;
}

@media (max-width: 900px) {
  html { font-size: 16px; }
}

@media (max-width: 400px) {
  html { font-size: 12px; }
}

/* Type will scale with document */
h1 {
  font-size: 2.6rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.1rem;
}

В приведенном выше коде для другого @media query установлен другой корневой font-size, а тип font-size использует единицы rem. В результате тип будет масштабироваться относительно корневого набора font-size для каждого @media query.

Обратите внимание, что часто считается плохой идеей явно устанавливать корневой font-size в значение px. Это связано с тем, что оно переопределяет настройки браузера пользователя. Рекомендуется использовать блок % или избегать явной установки корневого font-size. Это устанавливает font-size в 100% от стандартного font-size браузера, который составляет 16px для большинства браузеров.

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

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

Проблемы при работе с em и rem

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

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

Наследование значений em

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

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

npm init -y

Затем установите пакет live-server, выполнив команду:

npm i live-server

Теперь замените свойство scripts в файле package.json на:

"scripts": {
    "start": "live-server"
  },

После этого создайте файл index.html и добавьте следующий код:

<!DOCTYPE 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">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100wh;
        }
        .parent {
            font-size: 15px;
        }
        .em-child {
            font-size: 2em;
        }
        .rem-child {
            font-size: 2rem;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <article class="container">
        <div class="parent">
            I'm 15px
            <div class="em-child">
                I'm 15px * 2 = 30px
                <div class="em-child">
                    I'm 30px * 2 = 60px
                    <div class="em-child">
                        I'm 60px * 2 = 120px.
                    </div>
                </div>
            </div>
        </div>
    </article>
</body>
</html>

Теперь запустите npm start для запуска dev-сервера, и мы получим:

В приведенном выше примере мы продемонстрировали эффект соединения блока em. Поскольку каждый дочерний элемент наследует свой font-size от ближайшего родителя, который наследует свой font-size от ближайшего родителя (и так далее), конечный font-size нежелательно 120px.

rem, или «корневой em«, был разработан для решения этой проблемы. Чтобы увидеть это в действии, замените все классы em-child на класс rem-child в файле index.html, как показано ниже:

<!DOCTYPE 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">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100wh;
        }
        .parent {
            font-size: 15px;
        }
        .em-child {
            font-size: 2em;
        }
        .rem-child {
            font-size: 2rem;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <article class="container">
        <div class="parent">
            I'm 15px
            <div class="rem-child">
                I'm 15px * 2 = 30px
                <div class="rem-child">
                    I'm 15px * 2 = 30px
                    <div class="rem-child">
                        I'm 15px * 2 = 30px.
                    </div>
                </div>
            </div>
        </div>
    </article>
</body>
</html>

И мы получаем:

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

Заключение

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

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

Ваш фронтенд перегружает процессор пользователей?

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

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