rem против em - все, что вам нужно знать
CSS является важной частью дизайна любого веб-сайта, но понимание нюансов его использования может быть сложным. Одна из самых важных вещей, которую нужно понять, — это разница между использованием rem и em в CSS и почему/когда вы должны использовать их.
Понимание различий между этими двумя модулями имеет решающее значение для веб-разработчиков, которые хотят создавать гибкие и отзывчивые веб-страницы, которые легко поддерживать и изменять. Это также помогает вашему веб-сайту соответствовать текущим рекомендациям по доступности веб-сайтов.
В этой статье мы рассмотрим все em и rem, их различия, когда и как их использовать, а также практические примеры em и rem в действии. К концу этой статьи у вас должно быть четкое представление об обоих значениях.
Когда использовать единицы em и rem в CSS
В этой статье предполагается, что читатель хорошо разбирается в CSS. Хотя вам не обязательно быть богом CSS, было бы неплохо, если бы вас не смущали базовые термины CSS.
Eдиницы em и rem в CSS
Когда мы ищем способы указания длины в CSS, мы избалованы выбором. Все единицы измерения длины в CSS делятся на две категории.
Абсолютная длина: Абсолютные длины, как следует из названия, являются абсолютными; они зафиксированы и ни на что не реагируют. Это означает, что что бы ни случилось, они будут одного размера. Абсолютная длина включает cm, mm, in, px, pts, и pc.
Относительная длина: Относительная длина — это единицы, которые определяют длину относительно другой единицы, т. е. они реагируют на основе других указанных единиц или элементов. Они включают %, vmax, vmin, vh, vw, ch, ex и единицы, о которых мы будем говорить, em и rem.
Что такое em в CSS
Единицы em в CSS — это относительная единица измерения, используемая для определения размера элементов на веб-странице, в основном размера шрифта. Поскольку это относительно его родительского элемента, 1 em равен размеру шрифта, установленному в родительском элементе.
Это означает, что если вы установите размер шрифта в родительском div на 20px и установите размер шрифта дочернего div на 2em, размер шрифта в дочернем 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>
Next, the 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> будет в 1,5 раза больше размера шрифта браузера по умолчанию, если нет прямого родительского элемента.
Поскольку большинство браузеров масштабируют свой размер шрифта по умолчанию в соответствии с размером экрана, это позволяет создавать гибкие и адаптивные макеты, которые могут адаптироваться к разным размерам экрана и шрифта.
Используя соответствующие свойства CSS, в единицах также можно задать размер других элементов, таких как поля, отступы и границы.
Что такое rem в CSS
Теперь, когда мы знаем, что такое em, давайте посмотрим на rem. rem — это еще одна единица измерения длины в CSS, которая расшифровывается как «root em». Поскольку мы знаем, что em равен размеру пункта текущего шрифта, мы можем сделать вывод, что «root em» относится к размеру шрифта корневого элемента, которым обычно является элемент <html>.
Как и em, rem наследует свой размер от родительского элемента, но родительский элемент, на который смотрит rem, — это не div или раздел над ним, а самый первый элемент, который его окружает, то есть элемент 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 в ваш файл CSS.
html{
font-size: 30px;
}
.child-2{
font-size: 2rem;
}Результат будет таким.
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-21-em-vs-rem/em-vs-rem-2.png" alt="em-vs-rem">Как видите, несмотря на то, что элемент div child-2 находится внутри других элементов div, он полностью возвращается к элементу html, чтобы унаследовать его размер шрифта.
Использование модуля «rem» обеспечивает более масштабируемый и гибкий способ изменения размера элементов на странице, потому что, если вы измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью модуля «rem», будут автоматически обновлены, чтобы сохранить их относительные значения. размер.
Различия между единицами em и rem
К настоящему моменту вы уже знаете разницу между em и rem, но просто для ясности хотелось бы еще раз указать разницу между обоими значениями.
В CSS единица rem относится только к корневому элементу документа, а единица em относится только к непосредственному родителю целевого элемента. Это означает, что размеры em наследуются от родительских элементов, а размеры rem наследуются только от корневого элемента.
Когда использовать единицы em и rem в CSS
Рекомендуется использовать единицу rem для глобальных значений, таких как размеры шрифта, поля и отступы, особенно если вы хотите указать размер шрифта для всего документа и равномерно масштабировать его, а не влиять на размеры шрифтов родительских элементов.
em больше подходит для значений, специфичных для конкретного элемента и его дочерних элементов. Это позволяет создавать последовательный и гибкий макет, который хорошо адаптируется к разным размерам экрана и размерам шрифта.
Возможные проблемы с использованием единиц em и rem в CSS
em и rem на сегодняшний день являются лучшими единицами измерения для указания длины, но, как и все в жизни, они не идеальны. Вот пара проблем, с которыми вы можете столкнуться при использовании em и rem:
- Сложные вычисления: использование единиц
emиremможет привести к сложным вычислениям, особенно когда задействованы вложенные элементы. Это может затруднить точное прогнозирование и контроль размера элементов на странице. - Проблемы наследования: поскольку единицы измерения относятся к размеру шрифта их родительского элемента, может быть сложно понять и контролировать, как размеры наследуются на странице. Это может привести к неожиданным результатам и потребовать дополнительной отладки для устранения.
- Проблемы с производительностью. В некоторых очень редких случаях использование единиц
emиremможет отрицательно сказаться на производительности, особенно в сочетании со сложными вычислениями или чрезмерным использованием на странице.
В целом, несмотря на то, что единицы em и rem могут быть полезны в определенных ситуациях, важно тщательно рассмотреть их потенциальные недостатки и определить, являются ли они лучшим выбором для вашего проекта.
