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

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. Так інтерфейс залишається передбачуваним, швидким і однаково зручним на будь-якому екрані.