Урок 33. Примеры: Media queries: min/max-width, ориентация и prefers-*

Пример 1. Базовая разметка дашборда

Три карточки. По умолчанию (узкий экран) они идут в одну колонку — стопкой.

<section class="dashboard">
  <article>Профиль</article>
  <article>Прогресс</article>
  <article>Практика</article>
</section>

.dashboard {
  display: grid;
  gap: 1rem;
}

Пример 2. min-width: одна колонка → три колонки

Это ключевой приём урока. Слева — как выглядит макет на узком экране (до 768px), справа — как он перестроится при min-width: 768px. Код один, результата два — переключение делает @media.

📱 Узкий экран (< 768px): 1 колонка

/* базовое правило, действует всегда */
.dashboard {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* одна колонка */
}

🖥️ Широкий экран (≥ 768px): 3 колонки

/* срабатывает только начиная с 768px */
@media (min-width: 48rem) {
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
  }
}

Пример 3. Промежуточный брейкпоинт: 1 → 2 → 3 колонки

Часто между телефоном и десктопом полезна «планшетная» ступень в 2 колонки. Ниже — три превью под три диапазона ширины.

📱 < 768px — 1 колонка

.gallery { display: grid; gap: 1rem; }

💻 768–1023px — 2 колонки

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

🖥️ ≥ 1024px — 4 колонки

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

Пример 4. Боковая панель появляется на широком экране

Типовая перестройка «контент + сайдбар»: на телефоне меню сверху стопкой, на десктопе — слева отдельной колонкой.

📱 Узкий: меню над контентом

.layout { display: grid; gap: 1rem; }

🖥️ Широкий: меню слева

@media (min-width: 48rem) {
  .layout {
    grid-template-columns: 9rem 1fr; /* сайдбар | контент */
  }
}

Пример 5. prefers-color-scheme: светлая и тёмная тема

Не-размерное условие. Браузер сам сообщает, какую тему выбрал пользователь в системе. Слева — как выглядит при светлой теме, справа — при тёмной.

:root {
  --bg: #ffffff;
  --fg: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --fg: #e2e8f0;
  }
}

body { background: var(--bg); color: var(--fg); }