CSS clamp(): задать адаптивный размер шрифта без media queries

Категория: CSS · Язык: CSS · Обновлено:

Функция clamp задаёт минимальное, предпочтительное и максимальное значение. Для типографики это позволяет плавно менять размер между ширинами экранов и сохранять читаемые границы без набора media queries.

Рабочий пример

CSS
.page-title {
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  line-height: 1.1;
}

Первый аргумент задаёт нижнюю границу, второй — гибкую формулу, третий — потолок. Учитывайте масштабирование страницы и проверяйте длинные заголовки.

Частый вопрос

Как сделать размер адаптивным только в диапазоне экранов?

Используйте clamp с подходящими min и max. Если нужен отдельный layout breakpoint, media query всё ещё остаётся правильным инструментом.