Примеры — Урок 39

Рабочие примеры

В каждом блоке сверху — реальный результат, ниже — код. Сравнивайте и экспериментируйте.

1. calc() — вычесть отступ из 100%

Блок занимает всю доступную ширину минус 40px — фиксированный «воздух» остаётся всегда.

width: calc(100% - 40px) — на 40px уже контейнера

.bar {
  width: calc(100% - 40px);
  background: #0f766e;
  color: #ecfeff;
  padding: 12px;
}

2. min() — «резиновый» блок с потолком

min(90%, 400px) = «не шире 400px, но на узком экране — 90% ширины». Меняйте ширину окна.

width: min(90%, 400px) — браузер берёт меньшее из двух

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

3. max() — минимальный безопасный отступ

max(16px, 5%) = padding никогда не меньше 16px, но на широком блоке растёт до 5%.

padding: max(16px, 5%) — пол отступа = 16px

.panel {
  padding: max(16px, 5%);
  background: #fef3c7;
}

4. clamp() — fluid-шрифт без media queries

Размер заголовка плавно меняется с шириной экрана, оставаясь между 1.5rem и 3rem.

Я расту вместе с экраном

font-size: clamp(1.5rem, 4vw, 3rem)

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

5. Всё вместе — hero-секция

Контейнер через min(), отступы через clamp(), абзац через max(). Один stylesheet вместо лесенки media queries.

CSS считает размеры за нас

Контейнер, шрифт и отступы остаются в безопасных пределах.

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

.hero h1 {
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
}

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

📄 lesson-39/index.html

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

Проверьте примеры в DevTools: медленно меняйте ширину окна и следите, как значения «прилипают» к границам.

Урок 39. Примеры: clamp(), min(), max(), calc()

⚡ Кратко