Адаптивный дизайн и точки перелома

1) Принципы

1. Контент-first: макеты строятся от задач и содержания, а не от «популярных» ширин.
2. Mobile-first: начинаем со строгого простого варианта и усложняем по мере роста ширины/возможностей ввода.
3. Progressive enhancement: базовый UX работает без JS/анимаций; улучшения подключаются по условиям.
4. Consistency: одинаковые паттерны — одинаковое поведение на всех брейкпоинтах.
5. Performance-aware: изображения, сетки и скрипты адаптируются по весу и сложности.

2) Точки перелома (брейкпоинты)

Выбираем по данным реальных устройств и по смене паттерна (колонок/навигации/типографики).

Рекомендованный набор (ориентир)

• Брейкпоинт вводим только при смене структуры (напр., 1→2 колонки карточек, появление сайдбара).
• Допустимы локальные брейки внутри компонента (контейнерные запросы).

3) Контейнерные запросы vs медиазапросы

Когда медиазапросы `@media`: меняется layout всей страницы (навигация, шаблон).
Когда контейнерные `@container`: карточка/виджет должен подстраиваться по своей доступной ширине (компонент независим от страницы).

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Используйте связку: медиа для фрейма страницы + контейнеры для компонентов.

4) Типографика: fluid + шаги

Сочетайте `clamp()` и шаги по брейкпоинтам.

css
:root {
/ Базовая fluid-гарнитура /
--fs-body: clamp(15px, 1.2vw + 0.2rem, 18px);
--fs-h2:  clamp(20px, 1.6vw + 0.4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1.55; }
h2  { font-size: var(--fs-h2);  line-height: 1.3; }
@media (min-width: 1200px) {
h2 { letter-spacing:.005em; } / тонкая настройка на LG+ /
}

• Длина строки 45–80 знаков (на сайдбарах 36–60).
• Шаги величин кратны 4/8-pt; line-height стабильный по брейкпоинтам.

5) Сетки и модули

На уровне секций — CSS Grid (колонки, области); внутри — Flex.
Высоты компонентов кратны baseline (напр., 40/48/56 px).
Имеем 2 пресета плотности: Comfort (чтение/дашборды) и Compact (таблицы/про).

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) Изображения и медиа

html
<img src="card-640.jpg"
srcset="card-640.jpg 640w, card-960.jpg 960w, card-1280.jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt="Описание">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

Для фонов — `image-set()` и lazy-loading.
Текст на изображении — только на плашке/оверлее; контраст ≥ AA.

7) Навигация и responsive-паттерны

XS/SM: bottom-nav или hamburger, заметный CTA; скрытый поиск раскрывается поверх.
MD: появляется persistent-sidebar/mega-menu.
LG/XL: два уровня навигации, быстрые фильтры, хлебные крошки.

Поведение: элементы не «переезжают» хаотично — всегда одна из заранее описанных схем.

8) Ввод: hover/touch/keyboard

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• Никакого критичного контента «только в hover».
• Зоны клика: ≥ 44×44 (моб.), ≥ 32×32 (десктоп).
• Клавиатура поддерживается на всех брейкпоинтах.

9) Безопасные зоны и системные вырезы

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) Темная/светлая темы и контраст

Темы независимы от брейкпоинтов: цели контраста одинаковые везде.
На XS избегаем «кислотных» акцентов; повышаем светлоту ссылок на темном фоне.
Поддержка `prefers-color-scheme` и ручного переключателя.

11) Производительность

Критичные CSS — inline или через `media="print"`/preload стратегию; JS загружаем отложенно.
Избегайте layout-тяжелых анимаций на длинных списках; анимируйте `opacity/transform`.
Ленивая загрузка картинок/виджетов; skeleton вместо спиннеров.
Ограничивайте «тяжелые» тени/фильтры на десятках карточек.

12) Токены дизайн-системы (пример)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) Практикум компонентов (контейнерные брейки)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: stacked-вид (лейбл слева, значение справа, блоками).
• SM+: горизонтальный скролл только при избытке столбцов, фиксируем шапку/первую колонку.
• Числа — tabular-nums, выравнивание по десятичной.

14) Локализация и RTL

`dir="rtl"` + `:dir(rtl)` для зеркалирования иконок/стрелок/margin-ов.
Переводы могут увеличивать длину строк на 20–30% — закладывайте запас.
Для некоторых писемностей (например, грузинский/тайский) увеличивайте базовый кегль на 1 px.

15) Специфика iGaming

Карточки турниров/бонусов: сетка 3×N (LG), 2×N (MD), 1×N (SM/XS); CTA и условия — в постоянной зоне.
Лидеры/рейтинги: sticky-шапка/первая колонка; на XS — stacked-режим; числа моноширинные.
Платежные формы: на XS — одноколоночные; на MD — 2 колонки (поле + пояснение).
Ответственные уведомления (18+, лимиты, риски): всегда видимы на всех брейкпоинтах, контраст AAA, без «спрятано в hover».

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

Фиксированные ширины блоков вместо сетки/колонок.
«Точка перелома на каждый пиксель»: слишком много медиазапросов → хаос.
Сломанный ритм: разные gutter/поля в соседних секциях без причины.
Критичный текст на изображении без плашки.
Контент, доступный только при hover (на тач недостижим).
Анимации layout-свойств на длинных списках.

17) QA-чек-лист

Сетка и контейнеры

• Колонки и gutter соответствуют брейкпоинтам; контейнеры центрированы.
• Компоненты корректно «перетекают» 1→2→3 колонки без ломки.

Типографика

• Длина строки 45–80; fluid-кегли через `clamp()`.
• Контраст текста соответствует WCAG в обеих темах.

Изображения

• Есть `srcset/sizes`, `aspect-ratio` и lazy-loading; нет CLS.

Ввод и A11y

• Навигация клавиатурой; `:focus-visible` виден.
• Альтернатива hover на тач; зоны клика ≥ 44×44.
• `prefers-reduced-motion` поддержан.

Производительность

• Анимируются только `transform/opacity`; тяжелые эффекты ограничены.
• Критичные CSS/JS загружаются эффективно.

18) Документация в дизайн-системе

«Responsive & Breakpoints»: таблица брейкпоинтов, контейнеров, колонок и gutter.
«Container Queries»: примеры адаптивных компонентов.
«Fluid Type»: формулы `clamp()` и преднастройки шкал.
«Patтерны навигации»: XS/SM/MD/LG/XL-варианты.
«Do/Don’t» с короткими клипами и значениями CLS/LCP.

Краткое резюме

Адаптивность — это стратегия, а не набор хаотичных медиазапросов. Опирайтесь на контент и аналитику устройств, комбинируйте медиазапросы со зрелой сеткой и контейнерными запросами, применяйте `clamp()` для типографики, контролируйте изображения и производительность, поддерживайте все способы ввода и A11y. Так интерфейс остается предсказуемым, быстрым и одинаково удобным на любом экране.