Применение функции clamp() в css стилях при адаптивной верстке веб страниц

Функция clamp позволяет использовать относительные единицы измерения в css в заранее ограниченном диапазоне размеров элементов. Это означает, что помимо размера, который устанавливается относительно размера области просмотра, можно установить максимальный и минимальный размеры элемента.

В статье о единицах измерения в css освещался недостаток использования относительных единиц, который заключался в излишнем росте размеров элементов на большом экране. Применение функции clamp() решает эту проблему.

Использование

Функция записывается при помощи ключевого слова clamp, после которого идут скобки. В скобках записывается три аргумента.

clamp(MIN, VAL, MAX);

1. MIN — минимальный размер элемента. Указывается с помощью абсолютных величин. Как правило, это “px”.
2. VAL — относительная величина элемента на странице.
3. MAX — максимальный размер.

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

Стоит учитывать то, что функция требует проведения вычислений браузером. На это требуются дополнительные ресурсы устройства. Для того чтобы производительность оставалась на приемлемом уровне стоит умерено использовать данный подход.

Примеры использования

Размеры с помощью данного подхода можно задавать как html элементам, так и тексту на странице.

Пример с изображением

На странице есть изображение, которое находится внутри тега div.

<div class="image">

  <img src="./image/image.jpg" alt="">

</div>

По задумке дизайнера на ПК изображение имеет ширину 600px. Для ПК версии в дизайн макете был использован фрейм (ширина экрана) шириной 1440px.

На мобильных устройствах при минимальной ширине экрана 360px изображение должно уменьшится до 150px.

Для того, чтоб изображение сохраняло заданные пропорции относительно, ширины экрана применим к элементу с классом image функцию clamp() со следующими значениями:

width: clamp(250px, 41.7vw, 600px);

• Первым аргументом ограничивается минимальный размер изображения, до которого будет уменьшаться элемент.
• Второй аргумент в данном случае записан в VW единицах, которая рассчитывается исходя из того, что 1vw = 1% от ширины экрана. Так как в дизайн макете использовалась ширина фрейма 1440px, а ширина картинки составляет 600px произведем не сложные вычисления: 600 / 1440 * 100 = 41,6666.
• Третьим аргументом ограничим максимальную ширину картинки.

В результате получаем изображение, которое адаптивно отображается на всех устройствах без дополнительного кода.

Пример применения функции clamp для текста

На странице есть заголовок h1.

<h1 class="title">Теперь ты знаешь как использовать clamp()</h1>

По задумке дизайнера на экранах шириной 1440px размер шрифта составляет 45px. При уменьшении ширины экрана вплоть до размеров мобильного размер должен уменьшится до 25px.

Имея значения максимального размера шрифта и ширины фрейма, вычислим относительный размер применив формулу из примера выше: 45 / 1440 * 100 = 3,125vw.

Используя имеющиеся значения величины шрифта и полученное значение используем их в аргументе функции:

.title{

  font-size: clamp(25px, 3.1vw, 45px);

}

В результате мы получим шрифт, который постепенно уменьшается в размерах по мере уменьшения ширины экрана.

Никто не запрещает задавать с помощью функции такие параметры как margin, padding или border-radius элементов.

Так же помимо VW в качестве среднего размера можно выбрать другую относительную единицу, с которой удобней работать.

Лайфхак напоследок

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

В большинстве случаев размеры элементов страницы нет необходимости изменять на экранах шириной более 1000px. Если для расчета средней величины брать 1000px, то при сужении окна браузера элементы начнут менять свои размеры от 1000px и меньше.
Это вполне допустимо так как верстка в большинстве случаев будет отображаться адекватно. Плюсом здесь послужит то, что производить математические операции с числом 1000 можно быстро в уме.

Например, для того чтобы вычислить vw из 32px при ширине экрана, 1000px понадобится 30 / 1000 * 100. Как видим из примера достаточно всего лишь переставить запятую. Таким образом будет сэкономлено масса времени и сил.