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

CSS: em и rem — всё, что нужно знать

Источник: «rem vs em - Everything you need to know»
CSS — важнейшая часть дизайна любого сайта, но разобраться в тонкостях его использования бывает непросто. Одна из самых важных вещей, которую нужно понять, — это разница между использованием rem и em в CSS и то, зачем/когда следует использовать тот или иной вариант.

Оглавление

Введение

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

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

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

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

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

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

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

И единицы измерения о которых мы будем говорить: em — размер шрифта относительно размера шрифта родительского элемента и rem — размер шрифта относительно размера шрифта корневого элемента.

Что такое em в CSS

Как уже говорил выше, em в CSS — относительная единица измерения, используемая для определения размера элементов на веб-странице, в основном размера шрифта. Поскольку это относительная единица измерения — 1 em равен размеру шрифта установленном в родительском элементе. Это означает, что если вы установите размер шрифта в родительском <div> в 20px и установите размер шрифта дочернего <div> равный 2em, то размер шрифта в дочернем элементе будет равен 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 полезна тем, что позволяет настроить размер элементов на странице в зависимости от размера шрифта родительского элемента, что позволяет создать согласованную визуальную иерархию. Это можно использовать для создания доступных веб-сайтов, которые легко читать пользователям с нарушениями зрения.

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

p {
    font-size: 1.5em;
}

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

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

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

Что такое rem в CSS

Теперь, когда мы знаем что такое em, давайте рассмотрим rem. rem — ещё одна относительная единица измерения в CSS, которая расшифровывается как "root em" — "корневой em". Поскольку мы знаем, что em равен размеру шрифта родительского элемента, мы можем сделать вывод, что "корневой em" относится к размеру шрифта корневого элемента, которым обычно является элемент <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-2"> находится внутри других <div> элементов, он полностью возвращается к элементу <html>, что бы взять его размер шрифта.

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

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

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

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

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

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

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

Не всё так идеально, как хотелось бы и вот несколько проблем с которыми вы можете столкнуться используя em и rem:

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

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

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

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

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