skip to main content

rem / em

css

Кратко 🔗

Задаёт размер относительно размера шрифта родительского элемента — em (от emphemeral unit — «относительная единица измерения») или корневого элемента HTML (<html>) / SVG (<svg>) — rem (от *root emphemeral unit* — «главная относительная единица»).

Пример 🔗

html {
font-size: 16px;
}

.block {
font-size: 1.5rem; /* 16px × 1,5 = 24px */
}

.block .block__elem {
width: 5em; /* Размер шрифта родительского тега — 24px, т. е. 5em = 24px × 5 = 120px */
}

Как пишется 🔗

Как и другие CSS-единицы измерения (px, pt, vw, vh и другие) — пишутся сразу после числового значения без пробела:

селектор {
свойство: <значение>em;
}

селектор {
свойство: <значение>rem;
}

Как это понять 🔗

Единицы em / rem используют для вычисления размеры шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border-width и других.

Итоговое значение размера, заданное через em / rem вычисляется динамически и меняется, когда значение, от которого вычислялось em / rem изменится — изменится и итоговое значение.

Подсказки 🔗

💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:

html {
font-size: 62.5%;
}

Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

В работе 🔗

Роман,

🛠 Если размер страницы изменён глобально (через настройки операционной системы) или с помощью Ctrl + '+' / Ctrl + '-', значение шрифта в <html> также пропорционально изменится (даже если было задано явно). Если при вёрстке вы сможете найти закономерности размеров относительно размера шрифта (даже внешние margin-отступы или внутренние padding-отступы и высоты-ширины width / height), то такое масштабирование будет происходить более пропорционально.

Алёна,

🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, меняются только фактические размеры, то можно сделать, например, так:

html {
font-size: 62.5%; /* 10px */
}

.title-block {
width: 10rem; /* 10rem * 10px = 100px */
font-size: 2rem; /* 2rem * 10px = 20px */
}

@media (max-width: 640px) {
html {
font-size: 50%; /* 8px */
}

/*
Без дополнительных правил размер блока уменьшился до 80px,
а размер шрифта внутри до 16px
*/

}

Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇

Автор: Роман,