Пишем меньше @media используя сlamp

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

К счастью, если вы пишете современный CSS, вы можете воспользоваться служебной функцией clamp для объявления значений, которые плавно масштабируются от минимального до максимального.

Как бы мы сделали простой адаптив при помощи @media?

.element {
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  .element {
    font-size: 1.25rem;
  }
}

Давайте разберемся как это дело написать компактнее и проще!

Как работает clamp

clamp - это функция CSS, которая принимает три аргумента: минимальное значение, предпочтительное значение и максимальное значение (в таком порядке).:

.element {
  property: clamp(<min>, <preferred>, <max>);
}

Он пытается вернуть предпочтительное значение, если это значение находится между минимальным и максимальным. Если предпочтительное значение превышает допустимое, clamp возвращает максимальное значение. Если предпочтительное значение не соответствует заданному, clamp возвращает минимальное значение.

Отсюда и название — предпочтительное значение зажато между потолком и полом. Под капотом это эквивалентно объединению функций min и max в цепочку по отдельности.

На первый взгляд, clamp может показаться бесполезным, особенно если вы рассмотрите такой пример, как этот:

.element {
  font-size: clamp(12px, 16px, 20px);
}

В этом случае clamp всегда будет возвращать 16 пикселей, поскольку это статическое значение.

clamp по настоящему полезен, тогда когда вы даете ему динамическое предпочтительное значение.

И один из способов сделать это - использовать единицы измерения вьюпорта (vw), где 1vw определяется как один процент от текущей ширины вьюпорта. Если ширина видового экрана составляет 400 пикселей, то 1vw оценивается как 4 пикселя.

Всякий раз, когда изменяется ширина вьюпорта, браузеру необходимо пересчитать значение и преобразовать его в пиксель CSS. И это ключевой компонент, который позволяет нам заменять медиа-запросы линейно интерполированными значениями.

Лучший способ понять, как это работает, - это визуализировать это. Советую вам посмотреть на классную утилиту - современным редактором Fluid Typography от Adrian Gee, чтобы лучше понять, как работает clamp:

Итак, если мы установим наше предпочтительное значение в единицах vw, clamp гарантирует, что оно никогда не выйдет за пределы значений min и max, в то время к значение может плавно масштабироваться между этими двумя конечными точками. Вот пример:

.element {
  font-size: clamp(1rem, 0.45vw + 0.89rem, 1.25rem);
}

Работает так:

• Размер шрифта элемента должен быть не менее 1rem
• Размер шрифта элемента должен быть не более 1,25rem
• Предпочтительный размер шрифта элемента - 0,45vw + 0,89rem

Имейте в виду, что, хотя примеры, которые я показала здесь, предназначены для определения размера шрифта, clamp может быть применен к любым числовым свойствам, включая отступы, поля, границы и многое другое. Я призываю вас поэкспериментировать с clamp, чтобы увидеть, подходит ли он для ваших проектов.

Не забывайте подписываться на телеграм канал, чтобы не пропустить новые статьи, до встречи ✌️

Читайте еще:

• Что такое сборщики JavaScript и зачем их использовать
• Как автоматически настроить размер шрифта
• Безопасный каскад стилей CSS с :where