CSS: em и rem — всё, что нужно знать
em
и rem
, когда и зачем их нужно использовать.Понимание разницы между этими двумя единицами измерения имеет решающее значение для веб-разработчиков, которые хотят создавать гибкие и отзывчивые веб-страницы. Которые легко поддерживать и изменять. Это так же помогает вашему веб-сайту соответствовать текущим рекомендациям по доступности веб-сайтов.
В этой статье мы рассмотрим всё, что связано с em
и rem
, их различия, когда и как их использовать, а также практические примеры em
и rem
в действии. К концу этой статьи у вас будет чёткое представление об обоих значениях. Давайте приступим к делу.
Предполагается, что читатель хорошо разбирается в CSS. Необязательно быть профи, главное, чтобы основные CSS термины вас не смущают.
Единицы измерения em
и rem
в CSS
Когда мы выбираем способ указать размер в CSS, мы избалованы выбором. В CSS все единицы измерения делятся на две категории.
Абсолютные единицы измерения: как следует из названия они являются абсолютными, фиксированными и ни на что не реагируют. Это означает, что бы не случилось — они будут одного размера. Абсолютные единицы измерения включают:
mm
— миллиметры;Q
— четверть миллиметра1 Q = ¼ mm
cm
— сантиметры1 cm = 10 mm
;in
— дюймы;px
— пиксели,1 px = 1/96 in
;pt
— пункты,1 pt = 1/72 in
;pc
— пики,1 pc = 12 pt
.
Относительные единицы измерения: определяются на основании каких-либо других величин, т.е размеров других указанных величин или элементов. Они включают:
%
— размер в % относительно ширины родительского блока;lh
— высота строки элемента;ch
— ширина символа 0;ex
— x-высота шрифта, измеряется в высоте символа x в нижнем регистре,vh
— % высоты окна браузера;vw
— % ширины окна браузера;vmax
— большее значение высотыvh
или ширины окна браузераvw
;vmin
— меньшее значение высотыvh
или ширины окна браузераvw
.
И единицы измерения о которых мы будем говорить: em
— размер шрифта относительно размера шрифта родительского элемента и rem
— размер шрифта относительно размера шрифта корневого элемента.
Что такое em
Как уже говорил выше, 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;
}
Вот, что у нас получилось:
Единица измерения em
полезна тем, что позволяет настроить размер элементов на странице в зависимости от размера шрифта родительского элемента, что позволяет создать согласованную визуальную иерархию. Это можно использовать для создания доступных веб-сайтов, которые легко читать пользователям с нарушениями зрения.
Важно отметить, что если вы не укажите значение родительского элемента, то в качестве родительского элемента будет использовано значение браузера по умолчанию.
p {
font-size: 1.5em;
}
В этом примере для свойства font-size
установлено значение 1.5em
. Это означает, что размер текста в элементе параграф <p>
будет в полтора раза больше размера шрифта браузера по умолчанию, если нет прямого родительского элемента.
Поскольку большинство браузеров масштабирует свой размер шрифта по умолчанию в зависимости от размера экрана, это позволяет создавать гибкие и адаптивные макеты, которые могут адаптироваться к разным размера экрана и шрифта.
Используя соответствующее CSS свойство, единицы измерения em
можно использовать для установки размера других свойств элементов, таких как margin
, padding
и border
.
Что такое rem
Теперь, когда мы знаем что такое 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;
}
Результат будет таким:
Как видите, несмотря на то, что элемент <div class="child-2">
находится внутри других <div>
элементов, он полностью возвращается к элементу <html>
, что бы взять его размер шрифта.
Использования единицы измерения rem
обеспечивает более масштабируемы и гибкий способ изменения размера элементов на странице, потому что, если вы измени размер шрифта корневого элемента, все элементы, размер которых задаётся с помощью rem
, будет автоматически обновлён, для сохранения относительного значения размера.
В чём разница между em
и rem
После прочтения предыдущей части статьи вы уже знаете в чём заключается разница между em
и rem
, но для ясности ещё раз напомню. В CSS единица измерения rem
относится только к корневому элементу документа, а em
относится непосредственно к родительскому элементу. Это означает, что размеры em
наследуются от родительских элементов, а размеры rem
только от корневого элемента.
Когда использовать em
, а когда rem
rem
рекомендуется использовать для глобальных значений, таких как font-size
, margin
и padding
, особенно если вы хотите задать один font-size
для всего документа и обеспечить его равномерное масштабирование, без влияния родительских элементов.
em
подходит для значений, специфичных для конкретного элемента и его дочерних элементов. Это позволяет создать последовательный и гибкий макет, который хорошо адаптируется к разным размерам экрана и шрифта.
Возможные проблемы при использовании em
и rem
Не всё так идеально, как хотелось бы и вот несколько проблем с которыми вы можете столкнуться используя em
и rem
:
- Сложные вычисления: использование
em
иrem
может привести к сложным вычислениям, особенно когда задействованы вложенные элементы. Это может затруднить точное прогнозирование и контроль размера элементов на странице. - Проблемы наследования: поскольку
em
относятся к размеру шрифта родительского элемента, могут возникнуть трудности с пониманием и контролированием того, как размеры наследуются на странице. Это может привести к неожиданным результатам и потребовать дополнительной отладки для устранения. - Проблемы с производительностью: В некоторых редких случаях использование
em
иrem
может отрицательно сказаться на производительности, особенно в сочетании со сложными вычислениями или чрезмерным наследованием на странице.
В целом, несмотря на полезность em
и rem
важно тщательно рассмотреть их потенциальные недостатки и определить являются ли они лучшим выбором для вашего проекта.