Руководство по CSS clamp(): адаптив без медиа-запросов

В этой статье разбираем clamp() — функцию CSS, которая задает значение с нижней и верхней границей. Это удобно для адаптивной вёрстки, особенно для font-size, padding и margin.

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

Что такое clamp()?

CSS функция clamp() позволяет установить значение, которое адаптируется в заданном диапазоне в зависимости от ширины экрана.

clamp(минимум, предпочтительное, максимум)

Как это работает:

• Минимум: наименьшее допустимое значение
• Предпочтительное: динамическое значение (обычно с vw)
• Максимум: наибольшее допустимое значение

Практические примеры

1. Адаптивные заголовки

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

Этот заголовок:

• Не будет меньше 32px (2rem)
• Масштабируется с шириной экрана и при zoom страницы
• Не превысит 64px (4rem)

2. Плавные отступы

.container {
	padding: clamp(1rem, 1rem + 2vw, 3rem);
}

Важно: Не используйте только vw в среднем значении (например, clamp(1rem, 3vw, 3rem)). Единица vw зависит только от ширины viewport и не реагирует на масштабирование страницы (Ctrl/Cmd + или колёсико мыши). При увеличении масштаба страницы размер не изменится, что ухудшает доступность. Комбинируйте vw с относительными единицами: 1rem + 2vw.

3. Адаптивная ширина контейнера

.content {
	width: clamp(300px, 90%, 1200px);
}

Формула для идеального clamp()

Для расчёта оптимальных значений используйте формулу:

предпочтительное = минимум + (максимум - минимум) × (100vw - минимальный_viewport) / (максимальный_viewport - минимальный_viewport)

Пример расчёта:

• Минимальный размер: 16px при 320px viewport
• Максимальный размер: 24px при 1200px viewport

Коэффициент масштабирования: (24 − 16) / (1200 − 320) = 0.00909 → 0.909vw. Базовое значение: 16 − 0.00909 × 320 = 13.09px → 0.818rem.

font-size: clamp(1rem, 0.818rem + 0.909vw, 1.5rem);

Проверьте себя: при 320px получится ровно 16px, при 1200px — ровно 24px. Если подставить одинаковые числа в оба слагаемых (частая опечатка), кривая уедет — на 320px выйдет 17.5px вместо 16.

Считать это руками необязательно — воспользуйтесь калькулятором clamp(): он подставит числа сам и сразу покажет получившуюся кривую.

Преимущества использования clamp()

1. Меньше кода

Вместо множества медиа-запросов:

/* Старый подход */
p {
	font-size: 16px;
}
@media (min-width: 768px) {
	p {
		font-size: 18px;
	}
}
@media (min-width: 1024px) {
	p {
		font-size: 20px;
	}
}
@media (min-width: 1440px) {
	p {
		font-size: 22px;
	}
}

/* С clamp() */
p {
	font-size: clamp(1rem, 0.875rem + 0.625vw, 1.375rem);
}

2. Плавные переходы

Размеры изменяются постепенно, без резких скачков при смене брейкпоинтов.

3. Меньше мест для ошибки

Одна строка вместо набора брейкпоинтов — меньше кода, который надо поддерживать в трёх местах. А вот на производительность clamp() не влияет: значение пересчитывается на каждом кадре ресайза, тогда как медиазапрос переключается один раз. Выигрыш здесь в поддерживаемости, а не в скорости.

Лучшие практики

1. Используйте относительные единицы

/* Хорошо */
clamp(1rem, 2vw + 0.5rem, 2rem)

/* Избегайте */
clamp(16px, 2vw + 8px, 32px)

2. Тестируйте на разных устройствах

Проверяйте, как выглядят размеры на:

• Мобильных (320-414px)
• Планшетах (768-1024px)
• Десктопах (1280px+)

3. Комбинируйте с CSS переменными

:root {
	--min-size: 1rem;
	--max-size: 2.5rem;
	--fluid-size: 1.5vw + 0.5rem;
}

h2 {
	font-size: clamp(var(--min-size), var(--fluid-size), var(--max-size));
}

Поддержка браузерами

clamp() работает везде с 2020 года — это Baseline. Никакие запасные значения и полифилы не нужны, дублировать font-size перед ним не надо.

Распространённые ошибки

1. Неправильный порядок значений

/* Неправильно: максимум меньше минимума */
clamp(2rem, 1.5rem + 2vw, 1rem)

/* Правильно */
clamp(1rem, 0.8rem + 0.5vw, 2rem)

2. Слишком большой диапазон

/* Избегайте экстремальных значений */
clamp(0.5rem, 10vw, 5rem) /* Слишком большой разброс */

/* Лучше */
clamp(1rem, 2vw + 0.5rem, 1.5rem)

3. Использование только vw

/* Проблема: vw не реагирует на масштабирование страницы (Ctrl/Cmd +) */
clamp(1rem, 5vw, 3rem)

/* Решение: добавьте базовое значение в rem/em */
clamp(1rem, 0.75rem + 2vw, 3rem)

Продвинутые техники

1. clamp() всегда линеен

Иногда советуют «нелинейное масштабирование через calc()». Это заблуждение: clamp() умеет только прямую линию между минимумом и максимумом. Если нужна кривая — придётся разбивать диапазон на несколько отрезков или брать контейнерные запросы.

2. Адаптивная сетка

.grid {
	display: grid;
	gap: clamp(1rem, 0.5rem + 1vw, 2rem);
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(250px, 30%, 350px), 1fr)
	);
}

3. Анимированные значения

@keyframes grow {
	from {
		width: clamp(100px, 20vw, 200px);
	}
	to {
		width: clamp(200px, 40vw, 400px);
	}
}

Доступность: чистый vw ломает масштабирование

Это самая частая и самая незаметная ошибка.

/* Плохо: размер зависит только от ширины окна */
font-size: clamp(1rem, 2.5vw, 2rem);

Единица vw привязана к окну, а не к настройкам пользователя. Человек увеличил шрифт в браузере — текст не отреагировал. Формально это провал требования WCAG 1.4.4: страница обязана оставаться читаемой при увеличении до 200%.

Лечится одним слагаемым в rem:

/* Хорошо: rem реагирует на настройки пользователя */
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);

Правило простое: rem-слагаемое должно давать заметный вклад — ориентир не меньше половины значения на типичной ширине. Минимум и максимум тоже задавайте в rem: именно они дают тексту расти при зуме.

cqi вместо vw для компонентов

Если размер должен зависеть не от окна, а от контейнера — карточка в сайдбаре шире не станет, сколько ни расширяй экран, — берите cqi: это 1% инлайн-размера контейнера.

.card {
	container-type: inline-size;
}

.card h3 {
	font-size: clamp(1rem, 0.75rem + 2cqi, 1.5rem);
}

Бонус: при зуме контейнер растёт вместе с текстом, поэтому cqi ведёт себя доступнее vw. Подробнее — в статье про контейнерные запросы.

clamp() и line-clamp — разные вещи

Их постоянно путают, потому что называются похоже.

clamp() — математическая функция: ограничивает число между минимумом и максимумом. Работает с размерами, отступами, шириной.

-webkit-line-clamp — обрезка текста по числу строк с многоточием. К clamp() отношения не имеет.

/* Показать три строки и поставить многоточие */
.excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

min() и max()

clamp(a, b, c) — это в точности max(a, min(b, c)). Иногда нужна только одна граница:

/* Не шире 60 символов, но и не шире контейнера */
width: min(60ch, 100%);

/* Отступ минимум 1rem, дальше растёт с экраном */
padding: max(1rem, 3vw);

Кстати, 100vw включает ширину полосы прокрутки — отсюда классический горизонтальный оверфлоу. Берите 100% или 100dvw.

Заключение

CSS clamp() — это мощный инструмент для создания по-настоящему адаптивного дизайна. Он упрощает код, улучшает производительность и обеспечивает плавное масштабирование элементов.

Ключевые выводы:

1. Используйте clamp() для типографики и отступов
2. Комбинируйте с относительными единицами
3. Тестируйте на разных размерах экрана
4. Не считайте коэффициенты в уме — держите под рукой калькулятор

Начните использовать clamp() уже сегодня и сделайте ваш дизайн более гибким и современным!

Полезные ресурсы

• MDN: clamp()
• Fluid Typography Calculator
• Modern Fluid Typography Using CSS Clamp