clamp(): плавный размер с нижней и верхней границей
Функция clamp выбирает предпочтительное значение, ограничивая его снизу и сверху. Она удобна для плавных размеров, которые не должны становиться чрезмерно маленькими или большими.
Назначение
Функция clamp выбирает предпочтительное значение, ограничивая его снизу и сверху. Она удобна для плавных размеров, которые не должны становиться чрезмерно маленькими или большими.
Как это работает
Аргументы идут в порядке минимум, предпочтительное значение, максимум. Средний аргумент может зависеть от ширины окна, а границы — от размера шрифта. Типы значений должны подходить свойству: длины применяют к длинам, а не смешивают произвольно с числами.
Пример
<style>.fluid-title{font-size:clamp(1.5rem,1rem + 3vw,3rem);line-height:1.2;overflow-wrap:anywhere}</style>
<h2 class="fluid-title">Заголовок, который подстраивается под окно</h2>Что должно получиться
При изменении ширины заголовок плавно меняет размер внутри установленных границ. На узком окне он не становится меньше 1.5rem, на широком — больше 3rem при обычном порядке этих границ.
Граница применения и частая ошибка
Размер только в vw способен плохо реагировать на увеличение пользовательского шрифта. Смешанное выражение с rem обычно удобнее, но не освобождает от проверки масштаба. Если минимум больше максимума, нельзя ожидать, что функция сама поменяет их местами.
Самостоятельная проверка
Измените ширину окна и увеличьте масштаб страницы до 200%. Проверьте длинный заголовок: он должен переноситься, а не обрезаться. Сравните вычисленный font-size в DevTools на трёх разных ширинах.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.