В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими.
EM — размер относительно размера шрифта родителя
|
1 2 3 4 5 6 7 |
.parent { font-size: 16px; } .child { font-size: 2em; /* = 32px */ } |
2em внутри .child означает: в 2 раза больше font-size родителя. Внутри вложенных элементов em будет мультиплицироваться (компаундиться).
|
1 2 3 4 5 6 7 8 9 |
html { font-size: 16px; } body { font-size: 1.2em; /* = 19.2px */ } p { font-size: 1.1em; /* 1.1 * 19.2 = ~21px */ } |
REM — размер относительно font-size корневого html
|
1 2 3 4 5 6 7 |
html { font-size: 16px; } h1 { font-size: 2rem; /* = 32px */ } |
rem = root em. Не зависит от вложенности, только от html { font-size }.
Возникает закономерный вопрос — а можно ли использовать rem для самого контейнера html? Ответ — да.
И вот в чём нюанс: Когда вы задаёте rem для html {}, он обращаешься к самому себе. Поэтому rem в html {} будет зависеть от значения по умолчанию, заданного браузером (обычно 16px), если явно не переопределено раньше.
|
1 2 3 |
html { font-size: 1.25rem; /* 1.25 * 16px = 20px */ } |
Другие единицы:
px— абсолютный пиксель (жёстко фиксирован, не масштабируется).%— зависит от контекста (например, ширины родителя).vw,vh— проценты от ширины/высоты окна браузера.ch,ex— зависят от шрифта (ширина символа0, высотаx).
Когда использовать
| Хочешь… | Используй |
|---|---|
| Масштабируемый дизайн на всей странице | rem |
| Локальные размеры относительно font-size блока | em |
| Точный контроль, не зависящий от масштаба | px (осторожно) |
| Относительно размеров окна | vw / vh |