Які бувають відносні одиниці вимірювання в CSS?
Відносні одиниці в CSS, це одиниці, які залежать від розміру шрифту, розмірів вікна браузера або інших параметрів елемента/вікна. Вони гнучкі і допомагають створювати адаптивну верстку.
Групи відносних одиниць
1. Відносно шрифту
| Одиниця | Відносно чого |
|---|---|
em | розмір шрифту батьківського елемента |
rem | розмір шрифту кореневого елемента (html) |
ex | висота літери x поточного шрифту |
ch | ширина символу 0 поточного шрифту |
Приклад:
css
p { font-size: 2em; } /* у 2 рази більше за батьківський */2. Відносно розмірів вікна (viewport)
| Одиниця | Що означає |
|---|---|
vw | 1vw = 1% ширини вікна |
vh | 1vh = 1% висоти вікна |
vmin | 1% меншої сторони (ширина або висота) |
vmax | 1% більшої сторони |
Використовують для адаптивних блоків і шрифтів, наприклад:
css
h1 { font-size: 5vw; } /* шрифт залежить від ширини вікна */3. Відсоткові
| Одиниця | Опис |
|---|---|
% | залежить від батьківського елемента (для ширини, висоти, відступів тощо) |
Підсумок
| Група | Одиниці | Коли використовувати |
|---|---|---|
| Шрифтові | em, rem, ex, ch | для тексту, відступів, адаптивних інтерфейсів |
| Вікна браузера | vw, vh, vmin, vmax | адаптивні блоки/заголовки |
| Відсотки | % | розміри, що залежать від контейнера |
Найбільш затребувані на практиці: rem, em, %, vw, vh.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.