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

Для адаптивного изменения размера шрифта с помощью функции 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.

Оставить комментарий