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

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

⚡ Кратко

Три задания на desktop-first: объяснить подход словами, сверстать сетку «3 колонки → 1» через max-width и зафиксировать breakpoint по поведению контента в DevTools.

Задания

  1. Разбор: объясните своими словами, как в теме урока работают desktop-first, max-width и legacy CSS. В чём отличие от mobile-first?
  2. Код: создайте страницу с карточкой/сеткой, которая не шире контейнера и корректно меняется между 320px, 768px и 1200px (см. целевой результат ниже).
  3. Проверка: откройте DevTools, найдите момент, где контенту становится тесно, и запишите этот breakpoint рядом с CSS-правилом.

Целевой результат (задание 2)

Базово — три колонки на десктопе; на телефоне — одна колонка в стопку:

🖥️ десктоп: 3 колонки 📱 телефон: 1 колонка
Что должно получиться: гибкая desktop-база, которую max-width сворачивает в одну колонку.
Подсказка: начните с grid-template-columns на три колонки без @media, затем одним-двумя @media (max-width: …) уберите колонки. Базу делайте гибкой (minmax/fr), чтобы не было скролла.

Навигация