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() и высчитывает ширину. Такой подход может быть удобен, например, для создания утилитарного класса .container, что позволяет уменьшить количество медиавыражений.