Решения — Урок 39

Решения заданий

1. calc() — ширина минус фиксированный отступ

width: calc(100% - 48px)

.block { width: calc(100% - 48px); }

2. min() — потолок 500px

width: min(90%, 500px) — не шире 500px

.card {
  width: min(90%, 500px);
  margin-inline: auto;
}

3. max() — пол отступа 16px

padding-inline: max(16px, 6%)

.section { padding-inline: max(16px, 6%); }

4. clamp() — fluid-заголовок

Заголовок 1.5rem … 3rem

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

5. Исправление ошибки

В calc() нужны пробелы вокруг -, иначе браузер не распарсит выражение:

/* ❌ не работает */
.block { width: calc(100%-2rem); }

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

Итоговая hero-секция

📄 lesson-39/solution.html

<section class="hero">
  <h1>CSS считает размеры за нас</h1>
  <p>Контейнер, шрифт и отступы остаются в безопасных пределах.</p>
</section>

📄 lesson-39/solution.css

.hero {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  min-height: calc(100svh - 4rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}

.hero h1 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
  line-height: 1;
}

.hero p {
  max-width: max(42ch, 50%);
}

Урок 39. Решения: clamp(), min(), max(), calc()

⚡ Кратко