CSS: em и rem — всё, что нужно знать
em и rem, когда и зачем их нужно использовать.Понимание разницы между этими двумя единицами измерения имеет решающее значение для веб-разработчиков, которые хотят создавать гибкие и отзывчивые веб-страницы. Которые легко поддерживать и изменять. Это так же помогает вашему веб-сайту соответствовать текущим рекомендациям по доступности веб-сайтов.
В этой статье мы рассмотрим всё, что связано с em и rem, их различия, когда и как их использовать, а также практические примеры em и rem в действии. К концу этой статьи у вас будет чёткое представление об обоих значениях. Давайте приступим к делу.
Предполагается, что читатель хорошо разбирается в CSS. Необязательно быть профи, главное, чтобы основные CSS термины вас не смущают.
Единицы измерения em и rem в CSS
Когда мы выбираем способ указать размер в CSS, мы избалованы выбором. В CSS все единицы измерения делятся на две категории.
Абсолютные единицы измерения: как следует из названия они являются абсолютными, фиксированными и ни на что не реагируют. Это означает, что бы не случилось — они будут одного размера. Абсолютные единицы измерения включают:
mm— миллиметры;Q— четверть миллиметра1 Q = ¼ mmcm— сантиметры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 важно тщательно рассмотреть их потенциальные недостатки и определить являются ли они лучшим выбором для вашего проекта.