⚙️ Что такое clamp() в CSS и как его использовать?

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

➡️ Пример:

<div class="text">
  Адаптивный размер текста
</div>

<style>
  .text {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Минимум 1rem, максимум 2rem, предпочтение — 2.5% ширины окна */
    text-align: center;
  }
</style>

🗣️ В этом примере текстовый блок изменяет размер шрифта в зависимости от ширины окна, оставаясь в пределах от 1rem до 2rem. Функция clamp() упрощает создание адаптивного дизайна без сложных медиа-запросов.

🖥 Подробнее тут