em и rem в CSS? Данный пост о двух важных единицах измерения в CSS —
em и rem. Часто новички путаются в их использовании, а ведь это мощные инструменты для адаптивного дизайна! 🔹
em — зависит от родительского элемента em — это относительная единица, которая зависит от размера шрифта родителя. Например:
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
Здесь
1.5em означает 1.5 * 20px = 30px.⚠️ Будьте осторожны! Использование
em для вложенных элементов может привести к неожиданному увеличению шрифта. 🔹
rem — зависит от корневого элемента В отличие от
em, rem (root em) всегда рассчитывается относительно font-size у <html>. Например:
html {
font-size: 16px;
}
.child {
font-size: 1.5rem; /* 24px */
}
Здесь
1.5rem означает 1.5 * 16px = 24px, независимо от родителя! 🧐 Что выбрать?
✔
rem — удобен для глобального масштабирования (например, для всей страницы). ✔
em — полезен для элементов внутри компонентов (например, padding, margin). А вы чаще используете
em или rem? Напишите в комментариях!