Урок 35. Примеры: Desktop-first подход

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

⚡ Кратко

Каждый пример показывает один макет двумя статичными превью: широкое «как на десктопе» (несколько колонок) и узкое «как на телефоне» (одна колонка). Рядом — код @media (max-width), который и переключает эти состояния по ширине окна.

Почему два превью? Медиазапрос @media (max-width: …) реагирует на ширину окна браузера, а не на ширину блока внутри страницы. Поэтому внутри маленького превью он бы не сработал. Чтобы наглядно показать результат, мы рисуем оба состояния сразу: слева — «десктоп» (база, широкий макет), справа — «телефон» (как макет выглядит после срабатывания max-width). Код медиазапроса дан рядом.

1. Сетка-админка: 3 колонки → 1 колонка

База — три колонки (nav · рабочая область · aside). На 64rem aside уезжает на всю ширину, на 48rem всё складывается в стопку.

🖥️ десктоп (база)
nav
область
aside
📱 телефон (≤ 48rem)
nav
область
aside
📄 lesson-35/styles.css
/* база: широкий десктоп — три колонки */
.admin-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 18rem;
  gap: 1.5rem;
}

/* планшет: убираем боковую колонку */
@media (max-width: 64rem) {
  .admin-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
  .admin-layout aside {
    grid-column: 1 / -1;
  }
}

/* телефон: всё в стопку */
@media (max-width: 47.99rem) {
  .admin-layout {
    display: block;
  }
  .admin-layout > * + * {
    margin-top: 1rem;
  }
}

2. Шапка: логотип и меню в строку → друг под другом

Базово шапка — это flex-строка: логотип слева, меню справа. На узком экране max-width: 40rem переводит её в колонку.

🖥️ десктоп (база)
Logo
меню
📱 телефон (≤ 40rem)
Logo
меню
📄 lesson-35/styles.css
/* база: логотип и меню в одну строку */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* телефон: складываем в колонку */
@media (max-width: 40rem) {
  .site-header {
    flex-direction: column;
    gap: 0.5rem;
  }
}

3. Карточки товаров: 4 в ряд → 1 в столбик

Десктопная база — четыре карточки в ряд. С сужением их число уменьшается: на 64rem — две, на 40rem — одна.

🖥️ десктоп (база, 4 в ряд)
1
2
3
4
📱 телефон (≤ 40rem)
1
2
3
4
📄 lesson-35/styles.css
/* база: 4 карточки в ряд */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* планшет: 2 в ряд */
@media (max-width: 64rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* телефон: 1 в столбик */
@media (max-width: 40rem) {
  .cards { grid-template-columns: 1fr; }
}

HTML-структура примера

Разметка остаётся одной для всех ширин — раскладку меняет только CSS.

📄 lesson-35/index.html
<main class="admin-layout">
  <nav>Меню</nav>
  <section>Рабочая область</section>
  <aside>Сводка</aside>
</main>
Проверьте в DevTools: откройте пример, включите режим устройства (Ctrl/Cmd + Shift + M) и тяните ширину viewport влево — увидите, как на 64rem, 48rem и 40rem правила max-width срабатывают и макет упрощается.

Навигация