Единицы CSS делятся на абсолютные (фиксированные) и относительные (масштабируются с чем-то). Правильный выбор критичен для адаптивных и доступных макетов.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Используйте для элементов, которые не должны масштабироваться (границы, маленькие фиксированные детали).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em составляется при вложении (дочерний элемент дочернего элемента умножается), что может неожиданно расти. rem всегда ссылается на корень, поэтому это предсказуемо — стандартный выбор для размеров шрифта и отступов. Используйте em, когда хотите масштабирование относительно локального шрифта (например, padding кнопки, которая масштабируется со своим текстом).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Использование rem для типографии уважает пользователей, которые устанавливают больший размер шрифта по умолчанию — реальный выигрыш в доступности, который нарушает px.
Правильная единица делает макеты адаптивными и доступными: rem для типографии/отступов (предсказуемо + уважает настройки пользователя), %/vw/vh для текучего макета, px для фиксированных деталей, и em для локально-относительного масштабирования.
Новые единицы viewport (dvh, svh) также решают проблемы с высотой адресной строки мобильного браузера.