ТОП 5 Трюків із CSS | Частина №1

1. Використання clamp() для адаптивних розмірів

Функція clamp() дозволяє задати гнучкі розміри елементів з мінімумом і максимумом, що дає можливість адаптувати розміри залежно від ширини екрану.

h1 {
  font-size: clamp(24px, 5vw, 48px);
}

Цей приклад встановлює розмір шрифту в межах від 24px до 48px, з адаптацією на основі 5% ширини екрану. Це дозволяє шрифту змінюватися в залежності від розміру вікна, але з обмеженнями для мінімальних і максимальних значень.

2. Використання одиниць vw, vh, em, rem

Комбінація різних одиниць вимірювання дозволяє забезпечити адаптивність елементів на різних пристроях. vw і vh — це відсотки від ширини та висоти вікна браузера, а em і rem — відносно розміру шрифтів батьківських елементів або кореневого елемента.

.container {
  width: 80vw;
  height: 50vh;
}

У цьому випадку ширина елемента .container буде становити 80% від ширини вікна, а висота — 50% від висоти вікна. Це дає можливість елементам адаптуватися до розміру вікна браузера.

3. Управління співвідношенням сторін за допомогою aspect-ratio

Властивість aspect-ratio дозволяє задати співвідношення ширини та висоти елементів, що забезпечує правильні пропорції без додаткових обчислень.

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Цей код гарантує, що елемент .container зберігає співвідношення сторін 16:9 незалежно від розміру екрану або його ширини.

4. Використання Flexbox для створення гнучких макетів

Flexbox дозволяє створювати гнучкі макети, де елементи можуть автоматично коригувати свій розмір і позицію в залежності від доступного простору.

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
}

У цьому прикладі .container розташовує елементи .item по горизонталі з простором між ними. Кожен елемент .item буде займати рівний простір, оскільки встановлено flex: 1.

5. CSS Grid для складних макетів

CSS Grid дозволяє створювати двовимірні макети, де елементи можна розташовувати в рядки та стовпці з точним контролем їх розмірів.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: lightblue;
  padding: 20px;
}

У цьому прикладі .container створює сітку з трьох стовпців однакової ширини, а між елементами буде відступ 20px. Це дозволяє створювати більш складні макети з точним контролем над розміщенням елементів.