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

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

⚡ Кратко

Сделайте сетку карточек, которая перестраивается 1 → 2 → 3 колонки на брейкпоинтах 768px и 1024px. Проверьте в DevTools.

Задания

  1. Разбор. Объясните своими словами, чем отличаются min-width и max-width и почему брейкпоинт выбирают по контенту, а не по модели телефона.
  2. Сетка карточек. Сделайте галерею из 6 карточек: на узком экране — 1 колонка, с 768px — 2 колонки, с 1024px — 3 колонки. Ожидаемый результат на широком экране:
    ≥ 1024px: 3 колонки. На телефоне те же карточки идут стопкой в 1 колонку.
  3. Тёмная тема. Через prefers-color-scheme: dark поменяйте фон и цвет текста страницы. Проверьте, переключив тему в настройках ОС или в DevTools (Rendering → Emulate CSS prefers-color-scheme).
  4. Найдите брейкпоинт. Откройте DevTools, плавно тяните край окна и поймайте ширину, где вашему контенту стало тесно. Запишите это число рядом с CSS-правилом как комментарий.
Подсказка: базовое правило (узкий экран) пишите без @media, а более широкие случаи добавляйте через @media (min-width: …) по возрастанию ширины.

Навигация