Design adattivo e punti di frattura

1) Principi

1. Contenuti first: i layout sono basati su attività e contenuti, non su Shindle «popolari».
2. Mobile-first: cominciamo con una versione semplice e complicata mentre la larghezza e la capacità di input crescono.
3. Progressive enhancement: l'UX di base funziona senza animazioni JS/JS; i miglioramenti vengono collegati in base alle condizioni.
4. Consistency: pattern identici: stesso comportamento su tutti i breakpoint.
5. Performance-aware: immagini, griglie e script si adattano in base al peso e alla complessità.

2) Punti di frattura (breakpoint)

Scegliamo in base ai dispositivi reali e al cambio di pattern (colonne/navigazione/tipografia).

Set consigliato (punto di riferimento)

• Il breakpoint viene inserito solo quando la struttura cambia (ad esempio, le colonne delle schede, la comparsa del sidbar).
• I break locali all'interno del componente (query contenitore) sono validi.

3) Query contenitori vs media

Quando i media «@ media» cambiano layout dell'intera pagina (navigazione, modello).
Quando il contenitore «@ container» è una scheda/widget deve adattarsi alla sua larghezza disponibile (il componente è indipendente dalla pagina).

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

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

Utilizzare il collegamento multimediale per la cornice di pagina + contenitori per i componenti.

4) Tipografia: fluid + passi

Combinare clamp () e breakpoint.

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

• Lunghezza della riga 45-80 caratteri (sui sidbar 36-60).
• I passaggi di grandezza sono multipli di 4/8 pt; line-height stabile per breakpoint.

5) Griglie e moduli

A livello di sezione - CSS Grid (colonne, aree) all'interno c'è Flex.
Le altezze dei componenti sono multiple baseline (ad esempio, 40/48/56 px).
Abbiamo 2 presete di densità: Comfort (lettura/dashboard) e Compact (tabelle/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) Immagini e 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; }

Per i fondi - 'immagine-set ()' e lazy-loading.
Il testo nell'immagine è solo sulla piastra/overlay; il contrasto dell'AA.

7) Navigazione e pattern responsabili

XS/SM: bottom-nav o hamburger, notevole CTA; la ricerca nascosta viene visualizzata sopra.
MD: viene visualizzato persistent-sidebar/mega-menu.
LG/XL: due livelli di navigazione, filtri veloci, briciole di pane.

Comportamento: gli elementi non «traslocano» sono sempre uno degli schemi descritti.

8) Input: 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; }

• Nessun contenuto critico «solo in hover».
• Zone click: ≥ 44 x 44 (mob.) , ≥ 32 x 32 (disctop).
• La tastiera è supportata su tutti i breakpoint.

9) Zone sicure e tagli di sistema

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) Temi oscuri/luminosi e contrasto

I temi sono indipendenti dai breakpoint: gli obiettivi di contrasto sono uguali ovunque.
Sulla XS evitiamo l'accento «acido»; Aumentiamo la luminosità dei riferimenti sullo sfondo oscuro.
Supporta «preferers-color-scheme» e l'interruttore manuale.

11) Prestazioni

CSS critici - inline o tramite "media =" print "/pratoad strategy; Scarichiamo JS in ritardo.
Evitare le animazioni layout-pesanti su elenchi lunghi; animate'opacity/form '.
Caricamento pigro di immagini/widget skeleton invece di spinner.
Limitare le ombre/filtri pesanti a decine di schede.

12) Token di progettazione (esempio)

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) Workshop dei componenti (break contenitori)

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: vista stacked (etichetta a sinistra, valore a destra, blocchi).
• SM +: Scroll orizzontale solo quando le colonne sono in eccesso, fissiamo il cappello/prima colonna.
• I numeri sono tabula-nums, allineati in decimale.

14) Localizzazione e RTL

"dir =" rtl "+": dir (rtl) "per specchiare icone/frecce/margin-ov.
Le traduzioni possono aumentare la lunghezza delle righe del 20-30%.
Per alcune scritture (ad esempio georgiano/thailandese), aumentare di 1 px il numero di base.

15) Specificità del iGaming

Carte tornei/bonus: griglia 3 x N (LG), 2 x N (MD), 1 x N (SM/XS); CTA e condizioni - in una zona permanente.
Leader/ascolti: cappello sticky/prima colonna; XS - Modalità stacked i numeri sono molto lunghi.
Moduli di pagamento: per XS - monocolore; in MD - 2 colonne (campo + spiegazione).
Notifiche responsabili (18 +, limiti, rischi): sempre visibili su tutti i breakpoint, contrasto AAA, senza «nascosto in hover».

16) Anti-pattern

Larghezza fissa dei blocchi invece della griglia/colonna.
«Punto di frattura per pixel», troppi media hanno → ato il caos.
Ritmo rotto: gutter/campi diversi nelle sezioni adiacenti senza motivo.
Testo critico nell'immagine senza piastra.
Contenuti accessibili solo con hover (non raggiungibile per il serbatoio).
Animazioni di proprietà layout su elenchi lunghi.

17) Lista assegni QA

Griglia e contenitori

• Le colonne e i gutter corrispondono ai breakpoint; container centrati.
• I componenti vengono correttamente «trascinati» da una colonna senza interruzione.

Tipografia

• Lunghezza della riga 45-80; fluid-coegley tramite «clamp ()».
• Il contrasto del testo corrisponde a WCAG in entrambi i temi.

Immagini

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

Input e A11y

• Navigazione con tastiera; 'focus-visibile'visibile.
• Alternativa hover per tac; zona click 44 x 44.
• 'prefers-reduced-motion'supportato.

Prestazioni

• Vengono animati solo «transfer/opacity»; gli effetti pesanti sono limitati.
• I CSS/JS critici vengono caricati in modo efficiente.

18) Documentazione in progettazione

«Responsive & Breakpoint» è una tabella di breakpoint, contenitori, colonne e gutter.
Container Queries - Esempi di componenti adattivi.
«Fluid Type»: formule clamp () e preimpostazioni della scala.
«Pattern di navigazione»: opzioni XS/SM/MD/LG/XL.
«Do/Don't» con clip brevi e valori CLS/LCP.

Breve riepilogo

L'adattabilità è una strategia, non un insieme di media caotici. Basarsi su contenuti e analisi dei dispositivi, combinare i dati multimediali con griglie mature e query di contenitori, utilizzare clamp () per la tipografia, controllare immagini e prestazioni, supportare tutti i metodi di immissione e A11y. In questo modo l'interfaccia rimane prevedibile, veloce e comoda su qualsiasi schermo.