CSS clamp(): адаптивная типографика без медиазапросов — практическое руководство

Если вы устали от десятков @media для шрифтов, самое время познакомиться с CSS clamp(). Этот оператор позволяет задать минимальное, желаемое (флюидное) и максимальное значение свойства. Браузер сам рассчитает плавный переход между размерами по ширине экрана — без лишней логики.

Что такое clamp()

Синтаксис: clamp(min, preferred, max).

Быстрый старт: заголовок и текст

:root {
  /* База — комфортный размер текста */
  font-size: 16px; /* 1rem */
}

h1 {
  /* Плавный заголовок от 28px до 48px */
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
  line-height: 1.2;
  margin-bottom: 0.5em;
}

p {
  /* Текст слегка увеличивается на широких экранах */
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

Здесь мы используем rem для стабильной базы и vw для плавного роста. Так текст остаётся читабельным на мобильных и не становится «гигантским» на больших мониторах.

Почему это лучше медиазапросов

Проверенные рецепты

Шкала размеров с переменными

:root {
  --step--1: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);   /* мелкие подписи */
  --step-0:  clamp(1rem,     0.95rem + 0.3vw,  1.125rem); /* базовый текст */
  --step-1:  clamp(1.25rem,  1.05rem + 0.8vw,  1.75rem);  /* подзаголовки */
  --step-2:  clamp(1.75rem,  1.3rem  + 2vw,    2.5rem);   /* h2 */
  --step-3:  clamp(2.25rem,  1.5rem  + 3vw,    3rem);     /* h1 */
}

body { font-size: var(--step-0); }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
small { font-size: var(--step--1); }

Переносим всю логику в переменные и используем по месту — удобно масштабировать и поддерживать дизайн‑систему.

Сравнение с медиазапросами

/* Раньше */
h1 { font-size: 28px; }
@media (min-width: 768px) { h1 { font-size: 36px; } }
@media (min-width: 1200px){ h1 { font-size: 48px; } }

/* Теперь с clamp() */
h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem); }

Меньше условий и плавный рост на всём диапазоне ширин.

Подбор значений без сложной математики

Точная формула с «наклоном и сдвигом» существует, но на практике достаточно подбора по макетам и реальным устройствам. Начните с шаблонов из этой статьи и корректируйте под проект.

Не только шрифты: отступы, gap, радиусы

.card {
  padding: clamp(1rem, 0.5rem + 1vw, 2rem);
  border-radius: clamp(8px, 4px + 1vw, 20px);
  gap: clamp(0.5rem, 0.2rem + 0.8vw, 1.25rem);
}

Флюидные отступы поддерживают визуальную иерархию: интерфейс «дышит» на больших экранах и остаётся компактным на маленьких.

Доступность и лучшие практики

Поддержка браузеров и фоллбек

clamp() поддерживается всеми современными браузерами (кроме IE). На всякий случай можно указать безопасный размер до clamp — это и будет фоллбеком.

h1 {
  font-size: 2rem; /* фоллбек */
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
}

Либо использовать @supports для более строгого контроля:

h1 { font-size: 2rem; }
@supports (font-size: clamp(1rem, 2vw, 2rem)) {
  h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem); }
}

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

Готовый шаблон для проекта

:root {
  /* Базовая типографика */
  --fs-body: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  --fs-small: clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3rem);

  /* Вертикальный ритм */
  --space-1: clamp(0.5rem, 0.3rem + 0.4vw, 1rem);
  --space-2: clamp(1rem, 0.6rem + 0.8vw, 2rem);
}

body { font-size: var(--fs-body); line-height: 1.6; }
h1 { font-size: var(--fs-h1); line-height: 1.2; margin-bottom: var(--space-2); }
h2 { font-size: var(--fs-h2); line-height: 1.25; margin-bottom: var(--space-1); }
h3 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: var(--space-1); }
p + p { margin-top: var(--space-1); }

Когда всё же нужны медиазапросы

clamp() решает плавную шкалу размеров, но не заменяет контентные решения: перестройку сеток, смену лэйаута или скрытие блоков. Для этого используйте @media и (или) контейнерные запросы. Хорошая практика — сочетать: крупные структурные изменения через @media, а типографику — через clamp().

Итоги

Хотите быстро прокачать верстку, научиться собирать адаптивные макеты и понять лучшие практики на реальных проектах? Загляните на подробный курс — «Прокачать верстку на курсе Вёрстка сайта с нуля 2.0». Там вы системно соберёте знания по HTML/CSS и закрепите их практикой.

Источник