Урок 11. Адаптивность: брейкпоинты и container queries

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

⚡ Кратко

Приставка md: означает «начиная с 768px и шире» — Tailwind построен на подходе mobile-first. Базовый класс работает везде, приставка включает правило от указанной ширины: grid-cols-1 md:grid-cols-3. Начиная с v4 есть и container queries: @container у родителя и @md: у детей — реакция на ширину блока, а не окна.

О чём этот урок

Адаптивность в Tailwind — это не отдельный файл медиазапросов, а приставки к классам. Разберём шкалу брейкпоинтов, логику mobile-first, диапазоны (max-md:, sm:max-lg:), собственные брейкпоинты и container queries — механизм, который делает компонент по-настоящему переиспользуемым.

Структура урока

Теория

Mobile-first, брейкпоинты, диапазоны, container queries.

Справочник

Все приставки и их размеры.

Примеры

Сетка, шапка, таблица, карточка в контейнере.

Старый vs Новый

Медиазапросы в CSS против приставок.

Задания

Адаптировать блок и компонент.

Решения

Разбор с живым результатом.

Ошибки

Desktop-first, брейкпоинты «под устройства», лишние приставки.

Домашнее задание

Адаптивная страница проекта.

Ресурсы

Документация и справочники.

Практика

  • Сверстайте блок mobile-first: сначала мобильный вид, потом приставки.
  • Сделайте так, чтобы меню скрывалось только в диапазоне 640–1024px.
  • Соберите карточку, которая перестраивается по ширине контейнера.

Навигация