Стратегия брейкпойнтов

Спроектируй breakpoint-стратегию.

Принцип: не "mobile / tablet / desktop". Брейкпойнт где контент ломается — там и переход.

Стандартные точки (Tailwind)

sm:   640px   — большие телефоны / маленькие планшеты
md:   768px   — планшеты
lg:   1024px  — small laptop
xl:   1280px  — desktop
2xl:  1536px  — large desktop

Mobile-first подход

/* Default — mobile */
.card { padding: 1rem; }

/* Tablet+ */
@media (min-width: 768px) {
  .card { padding: 2rem; }
}

/* Desktop+ */
@media (min-width: 1024px) {
  .card { padding: 3rem; }
}

Пиши снизу вверх — проще поддерживать.

Когда добавлять breakpoint

• Текст становится слишком длинным (≥ 80 символов в строке)
• Картинки выглядят растянутыми
• Появляется лишний пустой space
• Кнопки слишком близко друг к другу или растянуты
• Hover-элементы не имеют смысла (touch)

Container vs media queries

Современный подход — container queries для компонентов:

.parent { container-type: inline-size; }

@container (min-width: 400px) {
  .child { flex-direction: row; }
}

Компонент адаптируется к своему контейнеру, не к viewport. Намного гибче.

Touch vs hover

/* Hover-only — не показывай на touch */
@media (hover: hover) {
  .button:hover { ... }
}

Touch-устройства не имеют hover — анимации hover не работают там.

Тач-таргеты

• Минимум 44×44px (Apple HIG)
• 48×48px (Material)
• 8px gap между кликабельными элементами

Тестирование

Не 3 размера — 10:

• 320px — узкий iPhone SE
• 375px — стандарт iPhone
• 414px — широкий iPhone
• 768px — iPad portrait
• 1024px — iPad landscape / small laptop
• 1280px — MacBook
• 1440px — стандартный desktop
• 1920px — large desktop
• 2560px — 4K
• 3840px — 5K iMac

Что часто ломается

• Modals на маленьких экранах — fullscreen вместо центрирования
• Таблицы — overflow-x или карточки на mobile
• Тексты с фиксированной шириной — max-w-prose (~65ch)
• Изображения — width: 100%; height: auto
• Sticky elements — могут перекрывать контент

Анти-паттерны

• ❌ "Mobile version" — отдельный сайт с подмножеством фич
• ❌ Hide-on-mobile важного функционала
• ❌ Зум для увеличения текста заблокирован (maximum-scale=1)
• ❌ Только desktop тестирование

Чек-лист

• Mobile-first CSS
• Touch targets ≥ 44px
• Hover-only effects обёрнуты в media query
• Текст max-width ~65ch
• Картинки responsive
• Тестировано на 5+ размерах
• Container queries где компонент важнее viewport