📘 Комбінування calc() і max() у CSS

Навчальний матеріал на тему "Комбінування calc() і max() у CSS", адаптований для використання у навчальному курсі з веб-технологій:

🎯 Мета уроку

Навчитися використовувати функції calc() і max() спільно для створення гнучких та адаптивних інтерфейсів.

🧠 Теоретична частина

1. Що таке calc()?

calc() дозволяє виконувати математичні обчислення безпосередньо в CSS. Це зручно, коли потрібно поєднати значення з різними одиницями виміру (наприклад, % і px).

Синтаксис:

width: calc(100% - 50px);

2. Що таке max()?

max() обирає найбільше з кількох значень.

Синтаксис:

width: max(300px, 50%);

У цьому прикладі ширина буде або 300px, або 50% — залежно від того, яке значення більше.

⚙️ Комбінування calc() і max()

Можна використовувати calc() всередині max() або навпаки. Це відкриває нові можливості для створення адаптивного дизайну, де розміри елементів можуть залежати від різних умов.

✅ Приклад 1: max() з calc()

width: max(300px, calc(100% - 2rem));

🔍 Пояснення:

Ширина елемента буде або 300px, або 100% - 2rem, залежно від того, яке значення більше.

✅ Приклад 2: calc() з max() всередині

padding-left: calc(max(1rem, 5%) + 20px);

🔍 Пояснення:

Використовуємо max() для вибору більшого значення між 1rem і 5%, потім додаємо до цього 20px

✅ Приклад 3: Комбінований підхід для заголовка

h1 {
  font-size: max(1.5rem, calc(1vw + 1rem));
}

🔍 Пояснення:

Заголовок буде мати мінімальний розмір 1.5rem, але якщо вікно ширше, розмір шрифту збільшиться завдяки 1vw.

🧪 Практичне завдання

Завдання:

Створіть адаптивний блок .card, який буде мати мінімальну ширину 320px, але при цьому не перевищуватиме 90% ширини вікна з урахуванням 40px відступу.

.card {
  width: max(320px, calc(90% - 40px));
  margin: 20px auto;
  padding: 1rem;
  background: #f0f0f0;
  border-radius: 10px;
}

❗ Корисні поради

• max() і min() чудово підходять для адаптивної типографії.
• calc() використовується, коли потрібно комбінувати різні одиниці або зробити точне позиціонування.

Функції можна вкладати одна в одну, але важливо зберігати читабельність коду.

📝 Домашнє завдання

• Створіть адаптивний макет сторінки з використанням calc() і max().
• Спробуйте адаптувати font-size, width, padding за допомогою цих функцій.
  
  

📎 Підсумок