Обложка: Улучшаем адаптивность сайта с помощью CSS функции clamp()

Улучшаем адаптивность сайта с помощью CSS функции clamp()

Чтобы улучшить адаптивность вашего сайта, не обязательно использовать какие-то сложные слушатели событий с помощью Web API ResizeObserver, функцию calc() или media-запросы CSS, которые будут подставлять нужные элементы страницы в зависимости от размера окна браузера.

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

Синтаксис

clamp(МИН, ЗНАЧЕНИЕ, МАКС) вычисляется как max(МИН, min(ЗНАЧЕНИЕ, МАКС)). Clamp вернёт значение указанное вторым аргументом (предпочитаемое), если оно не выходит за пределы минимального и максимального значений. В качестве любого из аргументов можно передавать вычисляемые значения.

Пример использования clamp для улучшения адаптивности размера картинки

 

В примере на картинке выше предпочитаемое значение — 50% от размера вьюпорта. Слева это 200px, а справа 700px.

Единицы измерения

Для предпочитаемого значения можно использовать следующие единицы измерения:

  • Ширина области просмотра в %, если clamp используется в body (либо ширина контейнера в котором находится clamp).
  • em — размер шрифта в текущем контекте.
  • rem — размер шрифта в контексте элемента html.
  • vw — 1% ширины окна.
  • vh — 1% высоты окна.

Поддерживаемые браузеры

Clamp не поддерживается только в браузере Internet Explorer.

Браузеры поддерживающие Clamp

Где использовать

Шрифт заголовков

Пример адаптивного размера шрифта с помощью clamp

Отличный вариант использования clamp () — это заголовки. Предположим, что вам нужен заголовок с минимальным размером 16 пикселей и максимальным размером 50 пикселей. Функция clamp() даст нам промежуточное значение, не выходящее за указанные рамки.

.title {
  font-size: clamp(16px, 5vw, 50px);
}

Здесь идеально подходит clamp(), потому что он гарантирует, что используемый размер шрифта будет легко читаться. Если использовать min() для установки максимального размера шрифта, то вы не сможете управлять шрифтом на небольших экранах.

CSS Grid — адаптивная сетка

Адаптивная сетка с помощью clamp

Ещё один хороший пример — адаптивное расстояние между столбцами CSS grid для экранов мобильных устройств. С помощью clamp это довольно просто реализовать.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

Адаптивный padding для секций
Пример padding для секций

Clamp() также идеально подойдёт для установки минимального и максимального размера отступа между секциями. Это можно сделать с помощью следующего CSS-кода:

.section {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

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

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Источники: clamp(), CSS Clamp(): The Responsive Combination We’ve All Been Waiting For, Linearly Scale font-size with CSS clamp() Based on the Viewport