Урок 39. Задания: clamp(), min(), max(), calc()

📁 Раздел: Современный CSS ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#calc #min #max #clamp

⚡ Кратко

Четыре мини-задания на calc(), min(), max() и clamp(). Проверяйте результат, меняя ширину окна браузера.

Задания

  1. calc(): сделайте блок шириной во весь контейнер минус 48px фиксированного отступа.
    Ожидаемый результат: блок всегда на 48px уже родителя при любой ширине.
  2. min() — потолок: задайте карточке ширину «не более 500px, иначе 90%».
    Ожидаемый результат: на широком экране карточка ровно 500px, на мобильном — 90% и центрирована.
  3. max() — пол: задайте секции горизонтальный padding «не меньше 16px, но до 6% на больших экранах».
    Ожидаемый результат: на телефоне отступ остаётся читаемым (16px), на десктопе расширяется.
  4. clamp() — fluid-шрифт: заголовок должен плавно меняться от 1.5rem до 3rem в зависимости от ширины.
    Ожидаемый результат: при сужении окна шрифт уменьшается, но не ниже 1.5rem и не выше 3rem.
  5. Проверка ошибки: найдите, почему width: calc(100%-2rem) не работает, и исправьте.
Подсказка: вспомните эквивалент clamp(a, b, c) = max(a, min(b, c)) и правило про пробелы в calc().

Навигация