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

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

⚡ Кратко

Строим CSS от маленького экрана к большому: базовые правила подходят для телефона, а через @media (min-width: …) добавляются колонки, сложная навигация и расширенные отступы.

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

ИнструментЗачем нуженМини-пример
mobile-firstБазовые стили для узкого экрана.cards { display: grid; gap: 1rem; }
min-widthРасширение макета от заданной ширины@media (min-width: 48rem) { ... }
progressive enhancementУлучшение интерфейса без потери базовой версииnav расширяется только на широком экране
content priorityСначала главное содержимое, затем вторичные блокиmain перед aside в HTML
Практическое правило: адаптивность начинается не с набора размеров устройств, а с поведения содержимого в доступной ширине.

Навигация