Урок 34. Ошибки: Mobile-first подход

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

⚡ Кратко

Строим CSS от маленького экрана к большому: базовые правила подходят для телефона, а через @media (min-width: …) добавляются колонки, сложная навигация и расширенные отступы.

Частые ошибки

1. Жёсткая ширина вместо гибкой базы

Базовый CSS пишут «как для десктопа» — с фиксированной шириной в пикселях. На телефоне блок не помещается и появляется горизонтальный скролл. Сравните, как ломается и как правильно:

❌ width: 360px в окне 240px
Блок шире экрана — скролл вбок
/* ❌ ломается на узком экране */
.card { width: 360px; }

/* ✅ гибкая база mobile-first */
.card {
  width: 100%;
  max-width: 360px;   /* не шире, но и не уже контейнера */
}

2. Остальные грабли

  • Breakpoint по названию устройства. Не угадывайте модель телефона — смотрите, на какой ширине ломается конкретный блок, и ставьте breakpoint туда.
  • Десктоп как база + куча отмен. Если CSS пестрит переопределениями в max-width, скорее всего вы пишете desktop-first там, где удобнее mobile-first. Переверните логику: база — узкий экран, min-width — расширения.
  • Неупорядоченные media queries. При mobile-first min-width должны идти по возрастанию (48rem, затем 64rem): иначе более узкое правило перекроет более широкое.
  • Игнорирование пользовательских настроек. Для анимаций и темы учитывайте prefers-reduced-motion и prefers-color-scheme, когда это влияет на интерфейс.

Навигация