Урок 34. Теория: Mobile-first подход

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

⚡ Кратко

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

Главная идея

Mobile-first не означает «важен только телефон». Это способ писать CSS так, чтобы простая и узкая версия была базой (она работает без единого media query), а более широкие экраны получали дополнительные возможности через @media (min-width: …).

Подход хорошо ложится на каскад: правила для маленького экрана идут первыми, затем min-width постепенно добавляет новые колонки, увеличивает gap и меняет навигацию. Так как медиазапросы идут от меньшей ширины к большей, более широкое правило просто перекрывает базовое — без лишних отмен.

Главное преимущество — меньше отменяющих правил. Вместо того чтобы ломать desktop-макет под телефон (откусывая колонки в max-width), мы расширяем уже рабочую компактную версию: достраиваем то, чего на узком экране не было.

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

Как растёт макет с шириной

Базовая версия — одна колонка. С каждым breakpoint появляется новая колонка: контент «дозревает» под доступную ширину.

Телефон · базовый CSS 1 колонка → 48rem Планшет · min-width 2 колонки → 64rem Десктоп · min-width 3 колонки
Прогрессивное усложнение: базовая колонка остаётся, новые добавляются на больших ширинах.

Правила, которые стоит запомнить

  • Базовый CSS должен быть полноценным: одна колонка, читаемые отступы, доступная навигация — и всё это без media query.
  • Каждый следующий breakpoint добавляет сложность, а не чинит поломку.
  • Используйте min-width в возрастающем порядке: например 48rem, 64rem, 80rem.
  • Breakpoint выбирается по содержимому (где блоку становится тесно), а не по модели устройства.

Базовый пример

Базовые правила (вверху) работают на телефоне. Два @media (min-width) ниже надстраивают макет для планшета и десктопа.

📄 lesson-34/styles.css
/* Базовый CSS — телефон. Никаких media query: одна колонка. */
.site-header,
.content-grid {
  display: grid;
  gap: 1rem;
}

.nav {
  display: grid;       /* меню вертикально */
  gap: 0.5rem;
}

/* +Планшет: логотип и меню в строку */
@media (min-width: 48rem) {
  .site-header {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .nav {
    display: flex;     /* меню горизонтально */
    justify-content: flex-end;
  }
}

/* +Десктоп: добавляем боковую колонку */
@media (min-width: 64rem) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}
Приём для превью: внутри страницы урока @media (min-width) реагирует на ширину окна браузера, а не на ширину блока с примером. Поэтому в разделе «Примеры» результат показан двумя статичными превью — «как на телефоне» (узкое, 1 колонка) и «как на десктопе» (широкое, N колонок), — а код @media приведён рядом. Чтобы увидеть реальное переключение, открой пример в DevTools и тяни ширину viewport.

Когда применять

Mobile-first — современный дефолт практически для любого нового сайта: большая часть трафика идёт с телефонов, а узкий экран — самое жёсткое ограничение, с которого удобно начинать. Desktop-first имеет смысл лишь в редких случаях (внутренняя «десктопная» админка, где мобильная версия второстепенна) — это разберём в уроке 35.

Навигация