125 подписчиков
Что такое CSS em и для чего они нужны?
Самая понятная и простая единица измерения в CSS это пиксель px. Сколько не меняй размеры окон или блоков, пиксель всегда остается пикселем. А что если нам нужно задать размер шрифта или отступы относительно родителя. В таких случаях используют относительные единицы em:
.parent {
font-size: 20px;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.75em;
}
<div class="parent">
Родительский компонент с размером шрифта 20px
<h1>Заголовок с размером шрифта 40px</h1>
<p>Текст с размером шрифта 15px</p>
</div>
Таким образом при изменении шрифта родительского блока, шрифты внутренних элементов масштабируются сами. Это позволяет один раз создать иерархию внутренних элементов, и при адаптации стилей, например, под экран ноутбука или смартфона, управлять только размером шрифта родителя.
Около минуты
26 мая