min max clamp

min, max и clamp — CSS-функции для адаптивных размеров, которые выбирают значение из набора без медиа-запросов.

Зачем нужно

Эти функции позволяют создавать плавно адаптирующиеся размеры без единого @media. clamp задаёт минимум, идеальное значение и максимум в одной строке — идеально для адаптивной типографики и отступов.

Где используется

  • Адаптивные размеры шрифтов (fluid typography)
  • Ограничение ширины контейнеров
  • Адаптивные отступы и gap
  • Любые значения, которые должны плавно масштабироваться

Предпосылки

min — наименьшее значение

Возвращает наименьшее из переданных значений:

.container {
  /* Ширина: 1200px или 100% — что меньше */
  width: min(1200px, 100%);
  /* При ширине экрана > 1200px → 1200px
     При ширине экрана < 1200px → 100% */

  /* Эквивалент: */
  width: 100%;
  max-width: 1200px;
}

.card {
  width: min(400px, 100% - 32px);
  /* Карточка не шире 400px и не выходит за padding */
}

max — наибольшее значение

Возвращает наибольшее из переданных значений:

.sidebar {
  /* Ширина: минимум 200px, но может расти до 25% */
  width: max(200px, 25%);
}

.text() {
  /* Шрифт не меньше 16px */
  font-size: max(16px, 1.2vw);
}

/* Отступ: минимум 16px, но растёт с экраном */
.section {
  padding: max(16px, 3vw);
}

clamp — значение в диапазоне

clamp(MIN, IDEAL, MAX) — предпочитает IDEAL, но не выходит за MIN и MAX:

.element {
  /* font-size: минимум 16px, идеально 2.5vw, максимум 32px */
  font-size: clamp(16px, 2.5vw, 32px);

  /* Эквивалент: */
  font-size: max(16px, min(2.5vw, 32px));
}

Адаптивная типографика

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
}

Адаптивные отступы

:root {
  --space-sm: clamp(8px, 1vw, 16px);
  --space-md: clamp(16px, 2vw, 32px);
  --space-lg: clamp(32px, 5vw, 80px);
}

section {
  padding: var(--space-lg) var(--space-md);
}

.card {
  padding: var(--space-md);
  gap: var(--space-sm);
}

Адаптивная ширина

.container {
  width: clamp(320px, 90%, 1200px);
  margin-inline: auto;
}

.article {
  max-width: clamp(45ch, 50%, 75ch);
}

Несколько аргументов

min и max принимают любое количество аргументов:

.element {
  width: min(100%, 800px, 90vw);
  /* Самое маленькое из трёх */

  padding: max(16px, 2vw, 1rem);
  /* Самое большое из трёх */
}

Вложенные функции

.element {
  /* calc внутри clamp */
  width: clamp(200px, calc(50% - 20px), 600px);

  /* min внутри max */
  font-size: max(1rem, min(3vw, 2rem));
  /* = clamp(1rem, 3vw, 2rem) */

  /* С переменными */
  padding: clamp(
    var(--min-padding),
    calc(var(--base-padding) + 1vw),
    var(--max-padding)
  );
}

Формула fluid typography

Формула для расчёта идеального значения в clamp:

IDEAL = MIN_SIZE + (MAX_SIZE - MIN_SIZE) * (100vw - MIN_VP) / (MAX_VP - MIN_VP)

/* Пример: 16px при 375px viewport, 24px при 1440px viewport */
/* IDEAL = 16 + (24-16) * (100vw - 375px) / (1440-375) */
/* = 16 + 8 * (100vw - 375px) / 1065 */
/* ≈ 0.57rem + 0.75vw */

h1 {
  font-size: clamp(1rem, 0.57rem + 0.75vw, 1.5rem);
}

Используйте калькуляторы fluid typography вместо ручных расчётов.

Частые ошибки

  1. clamp с одинаковыми единицами — бессмысленно:
    /* Бесполезно — просто используйте min-width/max-width */
width: clamp(200px, 300px, 400px); /* Всегда 300px */
  2. MIN > MAX — результат непредсказуемый:
    /* ОШИБКА */
font-size: clamp(2rem, 1vw, 1rem); /* MIN > MAX */
  3. Только viewport-единицы — нарушает доступность (пользователь не может масштабировать):
    /* ПЛОХО */
font-size: clamp(12px, 2vw, 24px); /* px не масштабируются */
/* ХОРОШО */
font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem); /* rem масштабируется */
  4. Забыли, что min возвращает меньшее — логика «перевёрнутая» относительно min-width

Практика

  • Создать fluid typography для body, h1, h2, h3 через clamp
  • Сделать контейнер через width: min(1200px, 100% - 48px)
  • Задать адаптивные отступы через clamp
  • Реализовать адаптивный gap без медиа-запросов
  • Использовать калькулятор fluid typography

Связанные темы

Ресурсы