Урок 37. Обзор урока: Адаптивная типографика и отступы
⚡ Кратко
Fluid-типографика — размеры, плавно растущие вместе с экраном, без скачков на breakpoint.
Главный инструмент — clamp(min, preferred, max) в связке с относительными единицами
(rem, em, ch, vw). Шкалу размеров и отступов держат в CSS-переменных.
О чём урок
Учимся делать fluid typography и fluid spacing: функция clamp(min, preferred, max) задаёт минимум, гибкое (vw-зависимое) значение и максимум, поэтому заголовки, текст и отступы растут плавно без десятков media-запросов.
Разбираем относительные единицы (rem vs em, ch для длины строки, vw для текучести), модульную шкалу размеров и единый ритм отступов через CSS custom properties.
Ключевые понятия
clamp(min, preferred, max)- fluid typography
- fluid spacing
- относительные единицы:
rem,em,ch,vw - длина строки (measure) —
max-width: 65ch line-height- CSS custom properties (
--step-*,--space-*) - модульная шкала
Структура урока
📖 Теория
Понятия, правила и практическая логика.
🔖 Справочник
Свойства, условия и короткие примеры.
💻 Примеры
Рабочая HTML/CSS связка.
⚖️ Старый vs Новый
Что ломалось раньше и как писать современнее.
📝 Задания
Практика для самостоятельной проверки.
✅ Решения
Один из корректных вариантов.
🐛 Ошибки
Типовые проблемы адаптива.
🏠 Домашнее задание
Итоговая мини-практика урока.
🔗 Ресурсы
Документация и повторение.