Урок 32. Справочник: Адаптивная, резиновая и отзывчивая вёрстка

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя

#max-width #min #width #clamp #margin-inline

⚡ Кратко

Ключевые инструменты гибкой вёрстки: max-width + width:100% (резина с пределом), min() / clamp() (гибкие значения), repeat(auto-fit, minmax()) (самораскладка колонок).

Четыре типа вёрстки

Тип	Ширина задаётся	Поведение при сужении окна
Fixed (фиксированная)	`width: 960px`	Не меняется → скролл / пустые поля
Fluid (резиновая)	`width: 80%`	Тянется пропорционально, без пределов
Adaptive (адаптивная)	Несколько фикс. раскладок	Переключается скачком по брейкпоинтам
Responsive (отзывчивая)	fluid + media queries	Тянется плавно и перестраивается

Инструменты гибкой ширины

Инструмент	Зачем нужен	Мини-пример
`max-width` + `width:100%`	Резиновый до предела, дальше фиксированный (главный приём)	`width:100%; max-width:72rem;`
`width: min()`	То же одной строкой: меньшее из двух значений	`width: min(100% - 2rem, 72rem);`
`max-width`	Не даёт блоку стать слишком широким	`max-width: 68rem;`
`clamp()`	Гибкое значение с минимумом и максимумом	`font-size: clamp(1rem, 2vw, 1.5rem);`
`margin-inline: auto`	Центрирует блок, когда он упёрся в предел	`margin-inline: auto;`
`auto-fit` + `minmax()`	Автоматически подбирает число колонок	`grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));`

Практическое правило: адаптивность начинается не с набора размеров устройств, а с поведения содержимого в доступной ширине. Брейкпоинты и media queries подробно — в уроке 33.

Навигация