Урок 11. Домашнее задание: адаптивная страница

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Сделать страницу проекта полностью адаптивной: от 320px до 1536px, с проверкой на всех брейкпоинтах и хотя бы одним компонентом на container queries.

Задание

Возьмите страницу, собранную в уроках 04–09, и доведите её до адаптива:

  • секции: поля 16px на мобильном, 32px от 768px, 48px от 1280px;
  • сетка карточек: 1 → 2 → 3 → 4 колонки;
  • шапка: меню скрыто до 768px, вместо него кнопка;
  • заголовки: text-2xl → md:text-4xl;
  • боковая панель появляется только от 1024px;
  • карточка уведомления перестраивается по ширине контейнера.

Подготовка окружения

cd tailwind-course
npm run dev
Проверяйте не в «режиме устройства», а плавным изменением ширины окна: так видно, где именно ломается макет. В DevTools удобно включить показ ширины окна (она отображается при перетаскивании).

Пошаговое решение

Шаг 1. Проверка мобильного

Сузьте окно до 320px и уберите всё, что вызывает горизонтальную прокрутку. Это база: она должна быть безупречной до добавления приставок.

Шаг 2. Расширяем постепенно

Тяните окно вправо. Как только макет становится «пустоватым» или тесным — добавляйте приставку. Так брейкпоинты появляются из макета, а не из списка устройств.

Шаг 3. Компонент на контейнере

Оберните карточку в @container и опишите её внутреннюю раскладку через @sm:/@md:. Затем положите её и в широкую колонку, и в узкий сайдбар — проверьте, что обе версии выглядят корректно.

Шаг 4. Чек-лист

Пройдитесь по ширинам 320, 375, 640, 768, 1024, 1280, 1536 и запишите дефекты. Исправьте все до одного.

Как проверить

  • Ни на одной ширине нет горизонтальной прокрутки.
  • Нет «пустых» экранов: контент занимает разумную ширину.
  • Кнопки и ссылки на мобильном не меньше 40px по высоте.
  • Компонент на container queries корректен в обоих контекстах.

Ориентир

Проект

Блок 1
Блок 2
Блок 3
<div class="rounded-xl border border-slate-200 bg-white p-4 md:p-6">
  <div class="flex flex-col gap-4 lg:flex-row">
    <main class="flex-1">
      <h2 class="text-2xl font-semibold tracking-tight text-slate-900 md:text-3xl">Проект</h2>
      <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
        <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Блок 1</div>
        <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Блок 2</div>
        <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Блок 3</div>
      </div>
    </main>
    <aside class="@container hidden w-full shrink-0 rounded-lg border border-slate-200 p-3 lg:block lg:w-64">
      <div class="flex flex-col gap-2 @sm:flex-row @sm:items-center">
        <div class="size-8 shrink-0 rounded-full bg-sky-100"></div>
        <p class="text-xs text-slate-600">Сайдбар виден от 1024px</p>
      </div>
    </aside>
  </div>
</div>