От автора: CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw.
Этот метод полезен, когда ваша цель — создать привлекательный дизайн для экранов разных размеров. Обычный вариант — использовать медиа-запросы для разного стиля страниц в зависимости от ширины экрана. Это означает, что вы определяете стили либо «сначала мобильные» для маленьких экранов и увеличиваете масштаб, либо «сначала настольные» для больших экранов и уменьшаете масштаб. Используя clamp(), мы можем уменьшить зависимость от контрольных точек, которые необходимо проверять на множестве различных значений ширины для согласованности, и заменить их известными наибольшими и наименьшими значениями и диапазоном масштабирования между ними.
Чтобы понять, как работает clamp(), мне нравится использовать метафору шлюзов канала. В шлюзах используются две стенки, которые можно поднимать и опускать, чтобы лодки могли перемещаться по ним. Когда лодка оказывается между шлюзами, вода либо добавляется со стороны высокого уровня воды, либо сливается со стороны низкого уровня воды, чтобы поднять или опустить уровень воды, соответственно. Это позволяет лодке плавно перемещаться между водоемами с минимальным и максимальным уровнем.
Более конкретно, clamp(100%, calc(1em + 1vw), 200%) было бы эквивалентно max(100%, min(calc(1em + 1vw), 200%)). Магия, конечно же, происходит в среднем значении, calc(1em + 1vw), где в вычислениях используется ширина окна браузера («ширина области просмотра»). 1vw равно 1/100 или 1% ширины области просмотра, поэтому результат 1em + 1/100 ширины браузера позволяет масштабировать размер при изменении размера браузера.
Давайте посмотрим, как можно масштабировать размер шрифта. Приведенный выше пример довольно близок к тому, что я сейчас использую на своем сайте:
body { font-size: clamp(100%, calc(1rem + 2vw), 1.375rem);
}Рассматривая это по частям, 100% просто означает «текущий базовый размер», который для font-size обычно означает 16 пикселей. calc(1rem + 2vw) использует em для root (опять же, 16 пикселей) плюс 2 сотые ширины области просмотра. 1.375rem — это жестко запрограммированное значение для желаемого максимального размера 22 пикселей.
Поддержка clamp(), а также связанных с ней функции min() и max(), на момент написания этой статьи, довольно хороша.
Согласно MDN, clamp() можно использовать везде, где вы используете число, процент или другую единицу длины. Как ни странно, когда я попытался применить этот подход для line-height, я обнаружил, что Safari 14, похоже, поддерживает line-height: clamp(…) (я использовал @supports), но он возвращался к базовой высоте строки, которая была слишком узкой. Я закончил тем, что использовал line-height: min(calc(1.1em + 1vw), 32px), чтобы получить гибкую высоту строки, примерно равную высоте строки для максимальной ширины содержимого. Мне не нужно было беспокоиться о минимальном значении, потому что на любой ширине, которую я тестировал, я не получал слишком малые значения, но если бы я захотел, я мог обернуть все это в max(): line-height: max(100%, min(calc(1.1em + 1vw), 32px)).
Автор: Caleb Hearth
Источник: calebhearth.com
Редакция: Команда webformyself.