Урок 39. Ошибки: clamp(), min(), max(), calc()

Частые ошибки

1. Нет пробелов вокруг + и − в calc()

Самая частая ошибка. calc(100%-2rem) молча не применяется — блок остаётся 100%.

/* ❌ не парсится */
.box { width: calc(100%-2rem); }

/* ✅ правильно */
.box { width: calc(100% - 2rem); }

2. Путают min() и max()

Чтобы ограничить ширину «сверху» (потолок), нужен min(), а не max(). Логика обратная названию.

/* ❌ хотели потолок 600px, а получили «не меньше 600px» */
.card { width: max(90%, 600px); }

/* ✅ потолок ширины */
.card { width: min(90%, 600px); }

3. clamp() без реальных границ

Если min равен max или гибкое значение без vw — теряется смысл функции, текст не «течёт».

/* ❌ нет гибкости — то же, что фикс 2rem */
h1 { font-size: clamp(2rem, 2rem, 2rem); }

/* ✅ настоящий коридор с vw */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

4. Перепутан порядок аргументов clamp()

Порядок строгий: clamp(min, preferred, max). Если min > max, браузер берёт min — результат «прилипает» к нижней границе.

/* ❌ min больше max */
h1 { font-size: clamp(3rem, 4vw, 1.5rem); }

/* ✅ min < max */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }