Разбираемся в отличиях между em и rem размерами шрифтов в CSS
Наверняка встречали в вёрстке em и rem размеры шрифтов… В чем разница между ними и для чего нужны? Погуглив нашел инфу для бывалых фронтендщиков. В этой же статье расскажу доступно об этих размерах шрифтов в CSS.
Как работает размер шрифта em в CSS?
Для начала возьмём контейнер:
<div id="gravi1">
<h1 class="zagolovok1">Заголовок 1</h1>
<div id="gravi2">
<h1 class="zagolovok1">Заголовок 2</h1>
</div>
</div>
В нём имеем общий блок #gravi1 и заголовок .zagolovok, затем вложенный блок #gravi2 и принадлежащий ему заголовок с таким же классом .zagolovok
Пусть у заголовка с классом .zagolovok будет размер шрифта 2em, при этом конкретно контейнерам #gravi1 и #gravi2 назначим разные размеры шрифта в px:
#gravi1 { font-size: 27px; }
#gravi2 { font-size: 17px; }
.zagolovok { font-size: 2em; }
В итоге увидим такой результат:
Заголовок 1
Заголовок 2
Заголовок 1 имеет размер 27px * 2, а Заголовок 2 размером 17px * 2, соответственно 54px и 34px. Почему так? Потому что .zagolovok { font-size: 2em; } задает размер относительно родительских показателей и указывает в сколько раз будет больше. Если бы размер был 1em, то размеры остались как у родителей 27px и 17px. А если бы не указал размер для #gravi2, то родительские значения будут от #gravi1 и оба .zagolovok будут одинакового размера.
Как работает размер шрифта rem в CSS?
Теперь изменим em на rem, что бы наглядно увидеть его:
#gravi1 { font-size: 27px; }
#gravi2 { font-size: 17px; }
.zagolovok { font-size: 2rem; }
Контейнеры оставляем те же, и смотрим результат:
Заголовок 1
Заголовок 2
Поскольку rem не зависит от значений родительских контейнеров, но зависит от главного значения по умолчанию у общего контейнера html, то в данном случае размер у .zagolovok 32px. Почему так? Потому что у html для всей страницы изначальное браузерное значение размера шрифта 16px, а поскольку .zagolovok { font-size: 2rem; }, то 2 * 16px. Разумеется в CSS можно переопределять размер шрифта у html.
На этом всё. Надеюсь всем было доступно и понятно 🙂 Задавайте вопросы в комментах, делитесь статьёй в соц. сетях.