• Главная
>
• HTML/CSS

Для адаптивного изменения размера шрифта с помощью функции clamp() в CSS, вам необходимо указать минимальное, предпочтительное и максимальное значения размера шрифта.

Предпочтительное значение само адаптируется в зависимости от размера экрана обычно, это выражается в процентах или vw - viewport width (подробнее про единицы измерения). Если значение выходит за рамки минимального или максимального, оно будет ограничено.

Какие аргументы принимает функция clamp() в CSS?

Функция clamp() в CSS принимает три аргумента в следующем порядке:

clamp(min, value, max)

• min : Устанавливает минимальный предел. Если значение value опускается ниже этого значения, будет использовано значение min.
• value : Это желаемое значение, которое будет использовано, если оно находится в диапазоне между min и max.
• max : Задает максимальный предел. Если значение value превышает это значение, тогда будет использовано значение max.

Пример использования clamp() для адаптивного изменения размера шрифта

p {
  font-size: clamp(16px, 4vw, 32px);
}

В данном примере 

• 16px — это минимальный размер шрифта.
• 4vw — это предпочтительный размер.
• 32px — это максимальный размер шрифта. 

Таким образом, размер шрифта будет динамически адаптироваться к размеру окна, но он не станет меньше 16px и не превысит 32px.