clamp()
Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
Синтаксис
clamp(min, preferred, max)Параметры
| Параметр | Тип | Описание |
|---|---|---|
| min | length | Нижняя граница. |
| preferred | length | Желаемое значение, обычно относительное: `5vw`. |
| max | length | Верхняя граница. |
Примеры
Плавный размер шрифта:
<h2 style="font-size: clamp(1.25rem, 5vw, 2.5rem);">Resize the window — the heading scales, but within limits</h2>Плавная ширина:
<div style="width: clamp(150px, 50%, 400px); padding: 8px; background: palegreen;">Between 150 and 400 pixels wide</div>Примечания
clamp() заменяет несколько медиазапросов для размеров шрифта и отступов. Добавьте к желаемому значению rem (2vw + 1rem), чтобы текст рос и при увеличении масштаба пользователем.
См. также
- min() — Берёт наименьшее из значений — способ задать верхний предел.
- max() — Берёт наибольшее из значений — способ задать нижний предел.
- font-size — Размер шрифта.
- px, em, rem, %, vw, vh — Единицы длины в CSS: абсолютные пиксели и относительные единицы.
Вопросы и ответы по теме
В учебнике
- Функции CSS — Вычисления прямо в CSS — calc(), min(), max() и clamp(), смешивание единиц, плавные размеры и функции вместе с переменными.