clamp()

Функция clamp() позволяет ограничивать диапазон изменения некоего значения, задавая его нижний и верхний пределы.

        
          
          .title {  font-size: clamp(1rem, 2.5vw, 2rem);}
          .title {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значения 1rem и 2rem будут минимальной и максимальной границами значения соответственно. 2.5vw — предпочтительный размер шрифта. Это означает, что размер шрифта будет варьироваться в зависимости от ширины окна браузера, но никогда не станет меньше, чем 1rem, и больше, чем 2rem.

Функция принимает три параметра: минимальное значение, предпочтительное значение и максимально допустимое значение.

• минимальное значение — нижняя граница допустимых значений; используется минимальное, если предпочтительное значение меньше этого значения;
• предпочтительное значение — рекомендуемое значение, которое будет использоваться до тех пор, пока результат находится между минимальным и максимальным значениями;
• максимальное значение — верхняя граница допустимых значений; используется максимальное, если предпочтительное значение больше этой верхней границы.

В качестве значений параметров можно использовать: calc(), min() или max(), различные единицы измерения.

        
          
          <div class="box">Ширина: 240px</div>
          <div class="box">Ширина: 240px</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .box {  width: clamp(240px, 80%, 360px);  margin: 0 auto;}
          .box {
  width: clamp(240px, 80%, 360px);
  margin: 0 auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При изменении ширины фрейма срабатывает функция clamp() и высчитывает ширину.

По сути clamp(МИН, ПРЕДПОЧТИТЕЛЬНОЕ, МАКС) — это то же самое, что max(МИН, min(ПРЕДПОЧТИТЕЛЬНОЕ, МАКС)): сначала предпочтительное значение сравнивается с максимумом и выбирается то, что меньше, а затем результат сравнивается с минимумом и выбирается то, что больше. Так браузер гарантирует, что итоговое значение никогда не выйдет за пределы диапазона.

На практике границы (минимум и максимум) обычно задают в фиксированных единицах вроде px или rem, а предпочтительное значение — в относительных единицах: vw, %, em. Тогда значение плавно меняется вместе с шириной окна или размером родителя, но не выходит за заданные рамки.

💡 Если предпочтительное значение в clamp() зависит только от vw, браузер может перестать учитывать масштабирование текста, которое настроил пользователь. Чтобы этого избежать, добавьте к vw фиксированную часть через calc(), например clamp(1rem, calc(0.5rem + 2vw), 2rem).

💡 clamp() работает не только с font-size и width, но и с padding, gap, line-height и любым другим числовым CSS-свойством.

        
          
          .container {  width: clamp(240px, 90%, 480px);  margin: 0 auto;  padding: clamp(16px, 4vw, 32px);}
          .container {
  width: clamp(240px, 90%, 480px);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          h1 {  font-size: clamp(1rem, calc(0.5rem + 4vw), 3rem);}
          h1 {
  font-size: clamp(1rem, calc(0.5rem + 4vw), 3rem);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать