Урок 34. Задания: Mobile-first подход

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

⚡ Кратко

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

Задания

  1. Разбор: объясните своими словами, как в теме урока работают mobile-first, progressive enhancement и min-width. Почему базовый CSS пишут без media query?
  2. Код: сверстайте сетку карточек, которая по mobile-first идёт одной колонкой на телефоне, двумя с 48rem и тремя с 64rem. Используйте только min-width.
  3. Проверка: откройте DevTools, найдите момент, где контенту становится тесно, и запишите этот breakpoint рядом с CSS-правилом — он должен быть обоснован содержимым, а не моделью устройства.

Ожидаемый результат (задание 2)

Сетка должна «достраиваться» по мере роста ширины:

< 48rem 1 в ряд ≥ 48rem 2 в ряд ≥ 64rem 3 в ряд
Одна колонка по умолчанию, новые добавляются на больших ширинах.
Подсказка: grid-template-columns: repeat(2, 1fr) внутри @media (min-width: 48rem), и repeat(3, 1fr) внутри @media (min-width: 64rem). Готовый вариант — в разделе «Решения».

Навигация