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

Превью не растягивается вместе с окном браузера, поэтому fluid-поведение мы показываем «застывшими кадрами»: каждый кадр — как бы один из размеров экрана.

1. clamp() для font-size — три «кадра» экрана

clamp(1.5rem, 6vw, 4rem). На узком окне 6vw мало → берётся min (1.5rem). На среднем — растёт по vw. На широком упирается в max (4rem).

.hero h1 {
  /* min 1.5rem · растёт по 6vw · max 4rem */
  font-size: clamp(1.5rem, 6vw, 4rem);
  line-height: 1.1;
}

2. rem vs em vs px — одинаковая запись, разный результат

Три абзаца с одинаковым 1.5, но в разных единицах. rem и px дают фиксированный размер; em зависит от родителя (здесь у родителя font-size: 20px, поэтому 1.5em = 30px).

.parent  { font-size: 20px; }
.a { font-size: 1.5rem; } /* 24px — от :root */
.b { font-size: 1.5em; }  /* 30px — от .parent */
.c { font-size: 24px; }   /* 24px — не масштабируется */

3. Длина строки через ch (measure)

max-width: 60ch держит строку в комфортных пределах. Слева — без ограничения (строка тянется и читать тяжело), справа — ограничено по ch.

.lead {
  max-width: 60ch;   /* ~60 символов в строке */
  line-height: 1.6;
}

4. Модульная шкала отступов (fluid spacing)

Шкала --space-* задаёт согласованный ритм. Здесь видны фиксированные «кадры» каждого шага — на узком экране они сжаты, на широком раскрыты.

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: clamp(1.25rem, 4vw, 1.75rem);
  --space-4: clamp(1.75rem, 6vw, 2.75rem);
}
.section { padding-block: var(--space-4); }
.stack > * + * { margin-top: var(--space-3); }

5. Собранный hero на переменных

Заголовок, лид и отступы — всё через шкалу. Превью показывает «средний» кадр.

<section class="hero">
  <p class="eyebrow">HTML & CSS</p>
  <h1>Плавная типографика без лишних breakpoint</h1>
  <p class="lead">Размеры растут вместе с экраном…</p>
</section>

.hero { padding-block: var(--space-section); }
.hero h1 { font-size: var(--step-5); max-width: 12ch; line-height: 1; }
.lead { font-size: var(--step-0); max-width: 65ch; line-height: 1.6; }