Загрузка…
В чём разница между единицами em, rem, %, px и vw/vh?
CSS · junior · сложность 4
Базовое понимание
Это разные «линейки»: абсолютная, относительная к шрифту, к родителю или к viewport.
Кратко по единицам
| Единица | Относительно чего |
|---|---|
px | CSS-пиксель (часто ≈ device pixel с учётом DPR) |
em | font-size элемента (для font-size — родителя) |
rem | font-size корня (html) |
% | зависит от свойства (ширина % → ширина родителя и т.д.) |
vw/vh | 1% ширины/высоты viewport |
html { font-size: 16px; }
.card {
font-size: 1.25rem; /* 20px от корня */
padding: 1em; /* от font-size самой .card */
width: 50%; /* половина родителя */
min-height: 50vh; /* половина высоты окна */
}Ловушки
em на вложенности «накапливается». % для высоты часто не работает без явной высоты родителя. vh на мобильных «прыгает» из‑за панели браузера (есть svh/dvh).
Итог
rem — типографика и отступы в дизайн-системе; %/fr — вёрстка относительно контейнера; vw/vh — привязка к окну; px — тонкие границы и точные детали.