Справочник урока
| Инструмент | Синтаксис | Зачем нужен | Мини-пример |
|---|---|---|---|
calc() | calc(выражение) | Смешивает единицы и считает выражение | width: calc(100% - 2rem); |
min() | min(a, b, …) | Берёт меньшее — потолок значения | width: min(100%, 72rem); |
max() | max(a, b, …) | Берёт большее — пол значения | padding: max(1rem, 3vw); |
clamp() | clamp(min, preferred, max) | Удерживает fluid-значение в коридоре | font-size: clamp(2rem, 5vw, 5rem); |
Правила синтаксиса
- Пробелы в calc(): вокруг
+и-— обязательны (это правило парсинга), вокруг*и/— нет. - Любое число аргументов:
min()/max()принимают сколько угодно значений через запятую. - Вложенность: функции можно вкладывать друг в друга и в
calc():clamp(1rem, calc(0.5rem + 2vw), 3rem). - Эквивалент:
clamp(a, b, c)==max(a, min(b, c)).
📄 примеры синтаксиса
/* потолок ширины */
.container { width: min(90%, 600px); }
/* пол отступа */
.section { padding-inline: max(1rem, 4vw); }
/* fluid-коридор */
h1 { font-size: clamp(2rem, 1rem + 4vw, 4rem); }
/* арифметика со смешанными единицами */
.full { min-height: calc(100vh - 4rem); }