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

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

⚡ Кратко

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

Решение задания 2: сетка карточек 1 → 2 → 3

Базовый CSS — одна колонка (без media query). Каждый min-width добавляет колонку. Ниже результат показан двумя статичными превью; реальное переключение проверяется в DevTools.

📱 база
1
2
3
🖥️ ≥ 64rem
1
2
3
/* база: одна колонка */
.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Решение задания «макет страницы»

Шапка, навигация и сетка контента — всё надстраивается от телефона к десктопу.

📄 lesson-34/solution.html
<header class="site-header">
  <a class="logo" href="#">HTML & CSS</a>
  <nav class="nav">Главная Практика Справочник</nav>
</header>
<main class="content-grid">
  <article>Главный материал</article>
  <aside>Дополнительно</aside>
</main>
📄 lesson-34/solution.css
.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;
  }
}
Самопроверка: если при изменении ширины появляется горизонтальный скролл, вернитесь к ограничениям контейнера и ширине дочерних элементов (max-width, minmax(0, 1fr)).

Навигация