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

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

⚡ Кратко

@media применяет CSS при условии: ширина (min-width/max-width), ориентация, системная тема. Брейкпоинты (~480/768/1024/1280px) выбирают по контенту. Раскладка перестраивается: 1 колонка на телефоне → 2–3 на десктопе.

О чём урок

Пишем media queries для ширины, ориентации и пользовательских предпочтений. Разбираем порядок правил, конфликтующие условия и почему breakpoint должен идти от контента.

Дальше применим media queries в mobile-first архитектуре.

Ключевые понятия

  • @media
  • min-width
  • max-width
  • orientation
  • prefers-reduced-motion
  • prefers-color-scheme
  • breakpoint
  • cascade order

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Свойства, условия и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что ломается и как писать современнее.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы адаптива.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация