Кратко
СкопированоЗадаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg> — rem (от root ephemeral unit — «главная относительная единица»).
Пример
СкопированоПусть размер шрифта корневого элемента <html> будет равен 16 пикселям:
html { font-size: 16px;}
html {
font-size: 16px;
}
Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:
.block { font-size: 1.5rem;}
.block {
font-size: 1.5rem;
}
Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.
.block__elem { width: 5em;}
.block__elem {
width: 5em;
}
А если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.
.block__elem { width: 5em; font-size: 2em;}
.block__elem {
width: 5em;
font-size: 2em;
}
Как пишется
СкопированоКак и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:
.selector { width: 10em;}.selector { margin: 5rem;}
.selector {
width: 10em;
}
.selector {
margin: 5rem;
}
Как понять
СкопированоЕдиницы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border и так далее.
Итоговое значение размера, заданное через em и rem, вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem, изменится.
Подсказки
Скопировано💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:
html { font-size: 62.5%;}
html {
font-size: 62.5%;
}
Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.
Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.
На практике
Скопированосоветует
Скопировано🛠 Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl -, то значение шрифта у <html> также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.
советует
Скопировано🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:
html { /* 10px */ font-size: 62.5%;}.title-block { /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem;}@media (max-width: 640px) { html { /* 8px */ font-size: 50%; }}
html {
/* 10px */
font-size: 62.5%;
}
.title-block {
/* 10rem * 10px = 100px */
width: 10rem;
/* 2rem * 10px = 20px */
font-size: 2rem;
}
@media (max-width: 640px) {
html {
/* 8px */
font-size: 50%;
}
}
Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.
Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇
На собеседовании
Скопировано отвечает
СкопированоЧто такое em
СкопированоЕдиницы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.
Это означает, что если установите размер шрифта в родительском <div> как 20px и размер шрифта дочернего <div> как 2em, размер шрифта в дочернем <div> будет равен 40px.
Что такое rem
Скопированоrem — это ещё одна относительная единица для величины шрифта в CSS. Так как em равен размеру пункта текущего шрифта, то rem относится к размеру шрифта корневого элемента. Обычно это тег <html>.
Польза для доступности
СкопированоЕдиницы em и rem — масштабируемый и гибкий способ изменения размеров шрифта на странице, в отличие от px. Если измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью em или rem, будут автоматически обновлены, чтобы сохранить их относительные значения.
Для того, чтобы шрифты на странице были доступными, рекомендуют использовать относительные единицы вместо абсолютных. Это особенно важно для пользователей, которые изменяют размер шрифта, разрядку букв и размеры других элементов для более удобного чтения и взаимодействия. Так изменение настроек шрифта в браузере пользователя не приведёт к проблемам со стилями, читаемостью или непредсказуемым результатам.