Adaptacyjna konstrukcja i punkty złamań

1) Zasady

1. Content-first: Układy są zbudowane z zadań i treści, a nie z „popularnych” szerokości.
2. Mobile-first: zaczynamy od ścisłej prostej opcji i stajemy się bardziej skomplikowani wraz z wzrostem możliwości szerokości/wejścia.
3. Stopniowe wzmacnianie: podstawowe UX działa bez JS/animacji; ulepszenia są połączone zgodnie z warunkami.
4. Spójność: te same wzory - to samo zachowanie na wszystkich punktach.
5. Realizacja: Obrazy, siatki i skrypty dostosowują się do wagi i złożoności.

2) Punkty złamania (punkty przełomowe)

Wybieramy według danych rzeczywistych urządzeń i poprzez zmianę wzoru (kolumny/nawigacja/typografia).

Zalecany zestaw (punkt odniesienia)

• Wprowadzamy przełom tylko przy zmianie struktury (na przykład, 1 → 2 kolumny kart, wygląd paska bocznego).
• Dozwolone są lokalne przerwy w komponencie (żądania kontenera).

3) Żądania kontenerów vs żądania mediów

Gdy zapytania multimedialne '@ media': zmienia układ całej strony (nawigacja, szablon).
Gdy kontener '@ container': karta/widżet musi dostosować się do dostępnej szerokości (składnik jest niezależny od strony).

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

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

Użyj nośnika do ramki strony + pojemniki do komponentów.

4) Typografia: płyn + kroki

Połączyć 'zacisk ()' i stopnie na punktach.

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+ /
}

• Długość linii 45-80 znaków (paski boczne 36-60).
• Stopnie wielkości to wielokrotności 4/8-pkt; Wysokość linii jest stabilna w punktach przełomowych.

5) Siatki i moduły

na poziomie sekcji - siatka CSS (kolumny, obszary); wewnątrz - Flex.
Wysokość części to wielokrotność wartości wyjściowej (np. 40/48/56 px).
Mamy 2 ustawienia gęstości: Komfort (czytanie/deski rozdzielcze) i Compact (tabele/pro).

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) Obrazy i media

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; }

Dla tła - 'image-set ()' i leniwy-loading.
Tekst na obrazku - tylko na płycie/nakładce; kontrast ≥ AA.

7) Nawigacja i wzorce reagowania

XS/SM: dolna nawigacja lub hamburger, znacząca CTA; ukryte wyszukiwanie rozszerza się na górze.
MD: wyświetlane jest trwałe pasek boczny/mega-menu.
LG/XL: dwa poziomy nawigacji, szybkie filtry, okruchy chleba.

Zachowanie: elementy nie „poruszają się” losowo - zawsze jeden z wcześniej opisanych schematów.

8) Wejście: 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; }

• Nie ma krytycznej treści „tylko w zawisie”.
• Kliknij obszary: ≥ 44 × 44 (mobilne), ≥ 32 × 32 (pulpit).
• Klawiatura jest obsługiwana na wszystkich punktach.

9) Bezpieczne strefy i cięcia systemu

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) Ciemne/jasne motywy i kontrast

Tematy są niezależne od punktów przełomowych: cele kontrastu są wszędzie takie same.
Na XS, unikać „kwaśnych” akcentów; zwiększyć lekkość linków na ciemnym tle.
Wsparcie dla 'prefers-color-scheme' i ręczny przełącznik.

11) Wydajność

Krytyczny CSS - inline lub via 'media =' print'/preload strategy; Ładunek JS opóźniony.
Unikaj ciężkich animacji na długich listach; animowane „nieprzezroczystość/przekształcenie”.
Leniwe ładowanie obrazów/widżetów; szkielet zamiast kręgosłupa.
Ograniczyć „ciężkie” cienie/filtry na dziesiątkach kart.

12) Żetony systemu projektowania (przykład)

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) Warsztat komponentów (przerwy w kontenerze)

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-view (etykieta po lewej stronie, wartość po prawej, w blokach).
• SM +: przewijanie poziome tylko z nadmiarem kolumn, naprawić nakrętkę/pierwszą kolumnę.
• Liczby - numery tabelaryczne, wyrównanie dziesiętne.

14) Lokalizacja i RTL

'dir =' rtl' '+': dir (rtl) 'do ikon lustrzanych/strzałek/marginesów.
Tłumaczenia mogą zwiększyć długość linii o 20-30% - ułożyć zapasy.
Dla niektórych pism (na przykład gruziński/tajski), zwiększyć rozmiar podstawy o 1 px.

15) Specyfika iGaming

Turniej/karty bonusowe: siatka 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA i warunki - na stałym obszarze.
Liderzy/oceny: lepki kapelusz/pierwsza kolumna; na XS - tryb ułożony; liczby są monospaced.
Formularze płatności: na XS - jednokolumnowa; na MD - 2 kolumny (pole + wyjaśnienie).
Odpowiedzialne powiadomienia (18 +, limity, ryzyko): zawsze widoczne na wszystkich punktach przerwania, kontrast AAA, bez „ukryte w zakręcie”.

16) Anty-wzory

Stałe szerokości bloku zamiast siatki/kolumn.
„Break point per pixel”: zbyt wiele medialnych żądań → chaos.
Złamany rytm: różne rynny/boiska w sąsiednich sekcjach bez powodu.
Krytyczny tekst na obrazie bez śmierci.
Zawartość dostępna tylko z zawisem (dotyk nieosiągalny).
Animacje właściwości układu na długich listach.

17) Lista kontrolna QA

Oczka i pojemniki

• Kolumny i rynny odpowiadają punktom granicznym; pojemniki są ześrodkowane.
• Elementy prawidłowo „przepływ” 1 → 2 → 3 kolumna bez łamania.

Typografia

• Długość linii 45-80; piny płynne przez „zacisk ()”.
• Kontrast tekstowy pasuje do WCAG w obu tematach.

Obrazy

• Еста "srcset/sizes'," aspect-ratio "," lazy-loading "; Nie ma CLS.

Dane wejściowe i A11y

• Nawigacja klawiatura; „: widoczne w ostrości”.
• zawisła alternatywa dotyku; kliknij obszary ≥ 44 × 44.
• „Preferers-reduced-motion” obsługiwane.

Wydajność

• Tylko „transformacja/nieprzezroczystość” jest animowana; ciężkie działania są ograniczone.
• Obciążenia krytyczne CSS/JS efektywnie.

18) Dokumentacja w systemie projektowym

„Responsive & Breakpoints”: tabela punktów przełomowych, kontenerów, kolumn i rynsztoków.
Zapytania kontenerowe: przykłady komponentów adaptacyjnych.
„Typ płynu”: formuły „zacisk ()” i ustawienia wstępne skali.
„Wzory nawigacyjne”: warianty XS/SM/MD/LG/XL.
„Do/Don” z krótkimi klipsami i wartościami CLS/LCP.

Krótkie podsumowanie

Adaptacja to strategia, a nie zestaw chaotycznych zapytań medialnych. Opieraj się na analizie treści i urządzeń, łączyć zapytania dotyczące mediów z dojrzałą siatką i zapytaniami o pojemniki, używać 'lamp ()' do typografii, kontroli obrazów i wydajności oraz obsługiwać wszystkie metody wprowadzania i A11y. Tak więc interfejs pozostaje przewidywalny, szybki i równie wygodny na każdym ekranie.