Кратко
СкопированоЗадаёт размер относительно величины шрифта родительского элемента — 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.
Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇