Руководство по 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.

Заключение

clamp() заменяет пачку медиазапросов одной строкой и растягивает размеры плавно, без скачков на брейкпоинтах. Кода становится меньше, а поддерживать его проще. На скорость страницы это не влияет, зато на оценку Lighthouse косвенно работает: меньше правил, меньше поводов для сдвигов раскладки.

Что запомнить

1. clamp() берут для типографики и отступов.
2. Слагаемое в rem обязательно, иначе текст перестанет реагировать на зум.
3. Проверяйте результат на 320px, на планшете и на широком мониторе.
4. Коэффициенты в уме не считают, для этого есть калькулятор.

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

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