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