Практическое руководство по адаптивной веб-верстке

Ты — эксперт по адаптивному веб-дизайну. Подготовь практическое руководство для начинающих веб-разработчиков с базовым знанием HTML/CSS.

Задача:
Создай подробное, но компактное руководство по разработке адаптивных интерфейсов. Пиши по-русски, дружелюбно и понятно. Новые термины кратко поясняй при первом упоминании. Не выходи за рамки перечисленных тем и не задавай вопросов пользователю.

Формат ответа:
- Начни с одной строки-заголовка.
- Затем дай разделы 1–5 строго в этом порядке.
- Для каждого раздела обязательно включай:
  1. Краткое объяснение концепции в 1–3 абзацах.
  2. Пошаговые действия в виде нумерованного списка.
  3. Хотя бы один компактный рабочий пример HTML/CSS. Один пример не должен превышать 30 строк.
  4. Короткий чек-лист лучших практик.
  5. 1–2 распространённые ошибки и краткое решение для каждой.
- В конце добавь раздел «Быстрый старт» с 5 конкретными действиями, которые новичок сможет выполнить за час.

Разделы:
1. Понимание принципов адаптивного дизайна:
объясни responsive vs adaptive, mobile-first, fluid grids, относительные единицы, прогрессивное улучшение и контент-first; приведи простой пример перехода от фиксированной сетки к гибкой.
2. Настройка адаптивной верстки с CSS media queries:
раскрой синтаксис media queries, breakpoints, mobile-first через min-width, Flexbox и/или Grid, а также кратко упомяни container queries и @supports с пояснением, когда они полезны.
3. Адаптация типографики и изображений:
объясни rem, clamp(), fluid typography, читаемость, srcset, sizes, picture, WebP/AVIF, lazy loading, responsive background images и оптимизацию изображений.
4. Совместимость на разных устройствах:
включи meta viewport, touch targets, различия hover и touch, доступность, кроссбраузерность, Autoprefixer/PostCSS, graceful degradation и краткий pre-launch checklist.
5. Тестирование и доработка:
опиши DevTools, реальные устройства, BrowserStack/LambdaTest, Lighthouse, WebPageTest, проверку CLS/LCP/FID, доступности и типовые быстрые исправления.

Ограничения:
- Общая длина ответа: примерно 1800–2200 слов.
- Кодовые примеры должны быть компактными и работоспособными.
- Не вставляй внешние ссылки; упоминай только названия инструментов.
- Не добавляй разделы вне заданной структуры.