CSS функції: calc(), clamp(), min(), max()

CSS Математичні Функції

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

calc()

calc() виконує арифметичні операції з різними одиницями:

css

.sidebar {
  width: calc(100% - 300px); /* Повна ширина мінус фіксована бокова панель */
}

.section {
  padding: calc(1rem + 2vw);
  margin-top: calc(var(--header-height) + 20px);
}

Правила:

Підтримує +, -, *, /
+ і - вимагають пробілів навколо них: calc(100% - 20px) ✅
* і / не вимагають пробілів, але принаймні один операнд має бути числом для *, а дільник має бути числом для /
Можна вкладати: calc(calc(100% - 40px) / 3)

min()

Повертає найменше значення зі списку:

css

.container {
  width: min(90%, 1200px); /* Що менше */
}

h1 {
  font-size: min(5vw, 3rem); /* Адаптивний, але з обмеженням */
}

max()

Повертає найбільше значення зі списку:

css

.sidebar {
  width: max(250px, 20%); /* Принаймні 250px */
}

p {
  font-size: max(16px, 1.2vw); /* Ніколи менше ніж 16px */
}

clamp()

clamp(min, preferred, max) — значення є бажаним, якщо воно не нижче min і не вище max:

css

/* Рідка типографіка */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Принаймні 1.5rem, ідеально 4vw, максимально 3rem */
}

/* Рідкий контейнер */
.container {
  width: clamp(320px, 90%, 1200px);
}

/* Рідке відступи */
section {
  padding: clamp(1rem, 3vw, 4rem);
}

Таблиця Порівняння

Функція	Синтаксис	Випадок Використання
`calc()`	`calc(a op b)`	Змішування одиниць, арифметика
`min()`	`min(a, b, ...)`	Обмеження максимальної величини
`max()`	`max(a, b, ...)`	Встановлення мінімальної величини
`clamp()`	`clamp(min, pref, max)`	Значення в межах діапазону

Практичні Приклади

Рідка Система Типографіки

css

:root {
  --text-sm: clamp(0.875rem, 1vw, 1rem);
  --text-base: clamp(1rem, 1.2vw, 1.125rem);
  --text-lg: clamp(1.25rem, 2vw, 1.5rem);
  --text-xl: clamp(1.5rem, 3vw, 2.5rem);
  --text-2xl: clamp(2rem, 4vw, 3.5rem);
}

Адаптивна Розкладка Без Медіа Запитів

css

.card {
  width: min(100%, 400px);
  padding: clamp(1rem, 3vw, 2rem);
  margin: max(1rem, 2vw);
}

Важливо:

clamp() є особливо потужним для рідкої типографіки і рідких відступів, часто усуваючи потребу в численних медіа-запитах. Він підтримується у всіх сучасних браузерах.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань