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

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

Оглавление

• Введение
• Единицы измерения em и rem в CSS
• Что такое em в CSS
• Что такое rem в CSS
• Разница между em и rem
• Когда использовать em, а когда rem в CSS
• Возможные проблемы при использовании em и rem в CSS

Введение

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

В этой статье мы рассмотрим все, что связано с 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 в CSS

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

.parent 
font-size: 20px; 
> 
 
.child 
font-size: 2em; 
> 
 
p  
font-size: 1.5em; 
>

Вот, что у нас получилось:

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

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

p  
font-size: 1.5em; 
>

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

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

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

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

Что такое rem в CSS

Теперь, когда мы знаем что такое em, давайте рассмотрим rem. rem — ещё одна относительная единица измерения в CSS, которая расшифровывается как “root em” — “корневой em”. Поскольку мы знаем, что em равен размеру шрифта родительского элемента, мы можем сделать вывод, что “корневой em” относится к размеру шрифта корневого элемента, которым обычно является элемент .

Не совсем понятно? Разберём ещё.

Как и em, rem наследует свой размер от родительского элемента, но родительский элемент на который смотрит rem, это не вышестоящий или , а самый первый элемент окружающий весь код, то есть элемент . Давайте рассмотрим пример, используя предыдущий код. Тот же 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>Documenttitle> 
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; 
>

Результат будет таким:

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

Использования единицы измерения 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 может привести к сложным вычислениям, особенно когда задействованы вложенные элементы. Это может затруднить точное прогнозирование и контроль размера элементов на странице.
• Проблемы наследования: поскольку em относятся к размеру шрифта родительского элемента, могут возникнуть трудности с пониманием и контролированием того, как размеры наследуются на странице. Это может привести к неожиданным результатам и потребовать дополнительной отладки для устранения.
• Проблемы с производительностью: В некоторых редких случаях использование em и rem может отрицательно сказаться на производительности, особенно в сочетании со сложными вычислениями или чрезмерным наследованием на странице.

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

SmartNews

ПрАТ «Львівобленерго» змінило організаційну структуру компанії з 1 вересня 2020 року, аби оптимізувати роботу районів електричних мереж (РЕМ) та з врахуванням другого етапу децентралізації України відповідно до прийнятої Верховною Радою України Постанови № 3650 «Про утворення та ліквідацію районів» від 17 липня 2020 року.

Енергетики реорганізували 20 районів електричних мереж компанії, створивши на їх базі 6 РЕМ:

Південний РЕМ — об’єднав Дрогобицький, Бориславський, Стрийський та Сколівський РЕМ;
Карпатський РЕМ — об’єднав Самбірський, Старосамбірський і Турківський РЕМ;
Східний РЕМ — об’єднав Золочівський, Буський та Бродівський РЕМ;
Північний РЕМ — об’єднав Кам’янка-Бузький, Радехівський та Північний РЕМ(Сокальщина, Червоноград);
Західний РЕМ — об’єднав Городоцький, Яворівський, Мостиський та Жовківський РЕМ;
Центральний РЕМ — об’єднав Центральний, Перемишлянський та Жидачівський РЕМ.

Куди звертатись клієнтам «Львівобленерго»?

Споживачам ПрАТ «Львівобленерго» відтепер необхідно звертатись за адресою нових районів електромереж:

Південний РЕМ — м. Дрогобич, вул. Стрийська, 118/3; тел.: 3-51-07; ел.адреса: [email protected]
Карпатський РЕМ — м. Старий Самбір, вул. Л.Українки, 13; тел.: 2-14-46; ел.адреса: [email protected]
Східний РЕМ — м. Золочів вул. Залізняка, 10; тел.: 4-25-48; ел.адреса: [email protected]
Північний РЕМ — м.Червоноград, вул. Гоголя, 2; тел.: 2-25-81; ел.адреса: [email protected]
Західний РЕМ — м. Яворів, вул. Маковея, 34; тел.: 2-13-85; ел.адреса: [email protected]
Центральний РЕМ — м. Пустомити вул. Шкільна, 27; тел.: 4-11-63; ел.адреса: [email protected]

Графік роботи : понеділок – четвер з 8.00 до 17.00 год., п’ятниця з 8.00 до 16.00 (обідня перерва з 12.12 до 13.00 год.)

Додатково інформуємо, що консультації та роз’яснення з питань роботи ПрАТ «Львівобленерго» клієнти можуть отримати:

• у кол-центрі за телефонами 0-800-30-15-68 (безкоштовно) або 067-333-15-68, 050-460-15-68, 093-170-15-68, (032) 290-75-68 (тарифи оператора), за номером 5068 (дзвінок платний);
• в інформаційно-консультаційному центрі: (032) 239-21-26; (032) 239-21-29; (032) 239-24-58; електронна пошта: [email protected]

• До історії перебування Андрея Шептицького в Кристинополі
• У Червоноградській громаді проводять заходи із вакцинації диких тварин від сказу
• Червоноград чи Кристинопіль? Місто все таки перейменують
• Митці Сокальщини привітали рідне місто із Днем народження виставкою “Насущне”
• Хор «Благословення» парафії церкви святого Йосафата співав у Патріаршому Соборі УГКЦ