🧮 CSS Math Functions Explorer

Интерактивное изучение CSS математических функций

calc() — Математические вычисления
Функция calc() позволяет выполнять математические вычисления при определении значений CSS свойств. Поддерживает сложение (+), вычитание (-), умножение (*) и деление (/).
🎮 Интерактивный пример
calc(100% - 50px)
width: calc(100% - 50px);
💡 Как это работает

calc() может комбинировать разные единицы измерения:

  • Проценты + пиксели: calc(100% - 50px)
  • Viewport + проценты: calc(50vw + 20%)
  • Умножение: calc(2 * 50px)
  • Деление: calc(100% / 3)

Важно: вокруг операторов должны быть пробелы!

❌ Неправильно: calc(100%-50px)

✅ Правильно: calc(100% - 50px)

📚 Примеры использования
width: calc(100% - 40px);
Элемент на всю ширину минус отступы по 20px с каждой стороны
font-size: calc(16px + 0.5vw);
Адаптивный размер шрифта: базовый 16px + 0.5% от ширины viewport
height: calc(100vh - 80px);
Высота на весь экран минус шапка 80px
min() — Минимальное значение
Функция min() выбирает наименьшее значение из списка аргументов. Полезна для создания адаптивных элементов с максимальной шириной.
🎮 Интерактивный пример
min(80%, 400px)
width: min(80%, 400px);
💡 Как это работает

min() выбирает наименьшее значение:

  • Если 80% < 400px → используется 80%
  • Если 80% > 400px → используется 400px

Эквивалент:

width: 80%;

max-width: 400px;

Но min() короче и элегантнее!

📚 Примеры использования
width: min(100%, 1200px);
Контейнер на всю ширину, но не больше 1200px
font-size: min(5vw, 50px);
Размер шрифта 5% от viewport, но не больше 50px
padding: min(5%, 40px);
Адаптивные отступы с максимальным ограничением
max() — Максимальное значение
Функция max() выбирает наибольшее значение из списка аргументов. Полезна для создания элементов с минимальной шириной.
🎮 Интерактивный пример
max(50%, 300px)
width: max(50%, 300px);
💡 Как это работает

max() выбирает наибольшее значение:

  • Если 50% > 300px → используется 50%
  • Если 50% < 300px → используется 300px

Эквивалент:

width: 50%;

min-width: 300px;

Но max() короче и элегантнее!

📚 Примеры использования
width: max(300px, 50%);
Элемент минимум 300px, но может расти до 50%
font-size: max(16px, 2vw);
Размер шрифта минимум 16px, но может расти
margin: max(20px, 5%);
Адаптивные отступы с минимальным ограничением
clamp() — Ограничение диапазона
Функция clamp() ограничивает значение диапазоном: clamp(минимум, предпочтительное, максимум). Идеальна для создания полностью адаптивных элементов.
🎮 Интерактивный пример
clamp(200px, 50%, 600px)
width: clamp(200px, 50%, 600px);
💡 Как это работает

clamp() ограничивает значение:

  • Если предпочтительное < минимума → используется минимум
  • Если предпочтительное > максимума → используется максимум
  • Иначе → используется предпочтительное

Эквивалент:

width: max(200px, min(50%, 600px));

Но clamp() гораздо читабельнее!

📚 Примеры использования
font-size: clamp(16px, 2.5vw, 24px);
Адаптивный шрифт: минимум 16px, максимум 24px, предпочтительно 2.5vw
width: clamp(300px, 50%, 800px);
Контейнер: минимум 300px, максимум 800px, предпочтительно 50%
padding: clamp(10px, 3vw, 50px);
Адаптивные отступы с ограничениями