Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Які бувають відносні одиниці вимірювання в CSS?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Відносні одиниці в 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`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати244 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.