Урок 35. Справочник: Desktop-first подход

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

⚡ Кратко

  • @media (max-width: 64rem) { … } — срабатывает, когда окно уже порога; упрощает макет.
  • База без @media = десктоп; max-width срезает сложность к узким экранам.
  • Гибкие размеры базы: minmax(), min(), fr, max-width: 100% — чтобы не было скролла.

Справочник урока

ИнструментЗачем нуженМини-пример
desktop-firstБазовые стили для широкого экрана.layout { grid-template-columns: 16rem 1fr 18rem; }
max-widthУпрощение при сужении viewport@media (max-width: 64rem) { ... }
override orderПорядок переопределений в каскаде1024px блок выше, 768px блок ниже
responsive refactorПостепенный перевод старого блока на гибкую модельfixed width -> max-width -> minmax()
Практическое правило: адаптивность начинается не с набора размеров устройств, а с поведения содержимого в доступной ширине.

Навигация