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

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

⚡ Кратко

Сверстать страницу с тремя media queries: min-width, orientation: landscape и prefers-reduced-motion: reduce. Проверить на 320 / 768 / 1024 / 1200px без горизонтального скролла.

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

Задача: Добавьте к странице три media queries: для `min-width`, для `orientation: landscape` и для `prefers-reduced-motion: reduce`; проверьте результат в DevTools.
1

Создайте HTML

Используйте семантические блоки и понятные классы.

2

Напишите базовый CSS

Сначала добейтесь читабельной версии без лишних breakpoint.

3

Проверьте ширины

Откройте DevTools и проверьте 320px, 768px, 1024px и 1200px.

Мини-чеклист

  • Нет горизонтального скролла.
  • Текст остаётся читаемым.
  • Breakpoint объясняется содержимым, а не случайным числом.

Навигация