Урок 39. Домашнее задание: clamp(), min(), max(), calc()

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

⚡ Кратко

Переделайте hero-секцию с фиксированными размерами на CSS-функции: min(), calc(), clamp(), max() — без единого media query.

Домашнее задание

Задача: Переделайте фиксированный hero: ширину задайте через min(), высоту через calc(), заголовок и секционные отступы через clamp(), а минимальный внутренний отступ через max(). Цель — убрать все media queries для размеров.
1

Соберите HTML

Используйте короткую семантическую структуру: <section class="hero"> с заголовком и абзацем.

2

Ширина и высота

Контейнер — width: min(100% - 2rem, 72rem), высота — min-height: calc(100svh - 4rem). Не забудьте пробелы вокруг -.

3

Шрифт и отступы

Заголовок — font-size: clamp(2rem, 1rem + 5vw, 5rem), вертикальные отступы секции — padding-block: clamp(3rem, 8vw, 7rem), минимальный боковой отступ — padding-inline: max(1rem, 4vw).

4

Проверьте границы

Медленно меняйте ширину окна в DevTools от мобильной до десктопной. Убедитесь, что шрифт не падает ниже минимума и не превышает максимум, а контейнер не вылезает за экран.

Навигация