Урок 35. Обзор урока: Desktop-first подход

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

⚡ Кратко

Desktop-first: сначала пишется широкий макет (база без @media), затем через @media (max-width: …) он упрощается для планшетов и телефонов. Зеркало mobile-first. Уместен в legacy и desktop-админках, но требует дисциплины переопределений.

О чём урок

Разбираем desktop-first: сначала пишется широкий макет (база без медиазапросов), затем через @media (max-width: …) он постепенно упрощается для планшетов и телефонов. Это прямое зеркало mobile-first из прошлого урока: там min-width достраивает макет вверх, здесь max-width срезает сложность вниз.

Подход полезен в legacy-проектах и desktop-ориентированных интерфейсах (админки, дашборды), но требует дисциплины переопределений. Дальше курс перейдёт к следующему блоку адаптивной вёрстки.

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

  • desktop-first
  • max-width
  • legacy CSS
  • override order
  • breakpoint range
  • layout simplification
  • responsive refactor

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

📖 Теория

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

🔖 Справочник

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

💻 Примеры

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

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

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

📝 Задания

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

✅ Решения

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

🐛 Ошибки

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

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

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

🔗 Ресурсы

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

Навигация