Design adaptiv și puncte de fractură

1) Principii

1. Content-first: Machetele sunt construite din sarcini și conținut, nu din lățimi „populare”.
2. Mobile-first: începem cu o opțiune simplă strictă și devenim mai complicați pe măsură ce capacitățile de lățime/intrare cresc.
3. Îmbunătățire progresivă: UX de bază funcționează fără JS/animații; îmbunătățirile sunt conectate în funcție de condiții.
4. Consecvență: aceleași modele - același comportament pe toate punctele de rupere.
5. Conştient de performanţă: imaginile, grilele şi scripturile se adaptează în greutate şi complexitate.

2) Puncte de fractură (puncte de întrerupere)

Alegem în funcție de datele dispozitivelor reale și prin schimbarea tiparului (coloane/navigare/tipografie).

Set recomandat (punct de referință)

• Introducem un breakpoint numai la schimbarea structurii (de exemplu, 1→2 coloanele de cărți, aspectul unei bare laterale).
• Sunt permise pauze locale într-o componentă (cereri de containere).

3) cereri de containere vs cereri media

Când interogările media „@ media”: schimbă aspectul întregii pagini (navigare, șablon).
Când containerul „@ container”: cardul/widgetul trebuie să se ajusteze la lățimea disponibilă (componenta este independentă de pagină).

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

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

Utilizați medii pentru rama paginii + containere pentru componente.

4) Tipografie: fluid + pași

Combinați „clemă ()” și pașii pe punctele de întrerupere.

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

• Lungime linie 45-80 caractere (bare laterale 36-60).
• Pașii de magnitudine sunt multipli de 4/8-pt; înălțimea liniei este stabilă în puncte de întrerupere.

5) Grile și module

La nivel de secțiune - CSS Grid (coloane, zone); în interior - Flex.
Înălțimile componentelor sunt multipli ai liniei de bază (de ex. 40/48/56 px).
Avem 2 presetări de densitate: Comfort (citire/tablouri de bord) ș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) Imagini și mass-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; }

Pentru fundaluri - „set de imagini ()” și încărcare leneșă.
Text în imagine - numai pe placă/suprapunere; contrast ≥ AA.

7) Navigare și modele receptive

XS/SM: bord sau hamburger, notabil CTA; căutarea ascunsă se extinde deasupra.
MD: apare bara laterală persistentă/mega-meniul.
LG/XL: două niveluri de navigare, filtre rapide, firimituri de pâine.

Comportament: elementele nu se „mișcă” aleatoriu - întotdeauna una dintre schemele descrise anterior.

8) Intrare: hover/touch/tastatură

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

• Nu există conținut critic „numai în hover”.
• Faceți clic pe zone: ≥ 44 × 44 (mobil), ≥ 32 × 32 (desktop).
• Tastatura este acceptată pe toate punctele de întrerupere.

9) Zone sigure și decupaje de sistem

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) Teme întunecate/ușoare și contrast

Subiectele sunt independente de puncte de întrerupere: obiectivele contrastului sunt aceleași peste tot.
Pe XS, evitați accentele „acide”; crește ușurința legăturilor pe un fundal întunecat.
Suport pentru „prefers-color-schemă” și comutator manual.

11) Performanță

CSS critic - inline sau prin intermediul 'media = „print' ”/strategia de preîncărcare; Încărcătura JS întârziată.
Evitați animațiile grele pe liste lungi; animate 'opacitate/transformare'.
Încărcare leneș de imagini/widget-uri; schelet în loc de spinners.
Limitați umbrele/filtrele „grele” pe zeci de cărți.

12) Proiectarea tokenurilor sistemului (exemplu)

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) Atelier de componente (pauze de containere)

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 (eticheta din stânga, valoarea din dreapta, în blocuri).
• SM +: defilare orizontală numai cu un exces de coloane, fixați capacul/prima coloană.
• Numere - numere tabelare, aliniere zecimală.

14) Localizare și RTL

'dir = "rtl'' + ': dir (rtl)' pentru a oglindi icoane/săgeți/margini.
Traducerile pot crește lungimea liniilor cu 20-30% - stabiliți stocul.
Pentru unele scrieri (de exemplu, georgiană/thailandeză), crește dimensiunea de bază cu 1 px.

15) Specificul iGaming

Carduri turneu/bonus: grila 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA și condiții - într-o zonă permanentă.
Lideri/evaluări: pălărie lipicioasă/prima coloană; pe XS - modul stivuit; numerele sunt monospaced.
Formulare de plată: pe XS - coloană unică; pe MD - 2 coloane (câmp + explicație).
Notificări responsabile (18 +, limite, riscuri): întotdeauna vizibile pe toate punctele de întrerupere, contrast AAA, fără „ascuns în hover”.

16) Anti-modele

Lățimi fixe de bloc în loc de grilă/coloane.
„Break point per pixel”: prea multe cereri media → haos.
Ritm rupt: diferite jgheaburi/aruncări în secțiunile adiacente fără nici un motiv.
Text critic într-o imagine fără mor.
Conținut disponibil numai cu hover (atingere inaccesibilă).
Animații de proprietăți de aspect pe liste lungi.

17) Lista de verificare QA

Plasă și recipiente

• Coloanele și jgheabul corespund punctelor de rupere; containerele sunt centrate.
• Componentele „curg” corect 1→2→3 coloană fără a se rupe.

Tipografie

• Lungime linie 45-80; pini de fluid prin „clemă ()”.
• Contrastul de text se potrivește cu WCAG în ambele teme.

Imagini

• Есть „srcset/mărimi”, „aspect-raport” и încărcare leneșă; fără CLS.

Intrare și A11y

• Navigare pe tastatură; „: focus-vizibil” vizibil.
• hover alternativă la atingere; faceți clic pe zonele ≥ 44 × 44.
• 'preferă mișcarea redusă' susținută.

Performanță

• Numai „transformare/opacitate” este animat; efectele severe sunt limitate.
• CSS critic/JS se încarcă eficient.

18) Documentația în sistemul de proiectare

"Responsive & Breakpoints': tabelul de puncte de întrerupere, containere, coloane și jgheab.
Interogări container: exemple de componente adaptive.
„Fluid Type”: „clemă ()” formule și presetări de scară.
„Modele de navigare”: variante XS/SM/MD/LG/XL.
„Do/Don' t” cu clipuri scurte și valori CLS/LCP.

Scurt rezumat

Adaptabilitatea este o strategie, nu un set de interogări media haotice. Bazați-vă pe conținut și pe analiza dispozitivelor, combinați interogările media cu o grilă matură și interogări de containere, utilizați 'clamp ()' pentru tipografie, imagini de control și performanță și sprijiniți toate metodele de intrare și A11y. Deci, interfața rămâne previzibilă, rapidă și la fel de convenabilă pe orice ecran.