Функция clamp()

Стилевая функция clamp() задаёт предпочитаемое значение, а также его нижнюю и верхнюю границы. Это позволяет установить диапазон, в котором должно располагаться значение.

Синтаксис

Свойство: clamp(<минимум>, <значение>, <максимум>)

Значения

  • <минимум> — минимальное значение;
  • <значение> — предпочитаемое значение;
  • <максимум> — максимальное значение.

В одном выражении допустимо применять разные единицы (px, %, vw, em, rem и др.), а также использовать функцию calc().

При указании значений соблюдайте условие «минимум < значение < максимум». Иными словами, значение должно быть больше минимума, но меньше максимума. Если параметры выставлены в неверном порядке (например: clamp(40px, 10px, 20px)), то в качестве значения выбирается минимум, в данном случае 40px.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>clamp()</title>
  <style> 
   .scale {
    font-size: clamp(1rem, calc(12px + 1vw), 24px);
   }
  </style>
 </head>
 <body>
  <p class="scale">Социализация, как бы это ни казалось 
  парадоксальным, отражает институциональный импульс.</p>
 </body>
</html>

В данном примере размер шрифта меняется вместе с шириной окна браузера, при этом размер шрифта находится в диапазоне от 1rem до 24px. На рис. 1 показано изменение размера шрифта вместе с шириной окна браузера.

Рис. 1. Изменение размера шрифта

Спецификация

CSS Values and Units Module Level 4

Браузеры

79 79 66 13.1 75
79 75 57 13.4