Design responsivo con le media query

Senza un meta tag, molti telefoni impaginano la pagina come se lo schermo fosse molto più largo (MDN cita come esempio 980 pixel) e poi la rimpiccioliscono, così una media query per i telefoni non scatta mai.

Una pagina, tutti gli schermi

Design responsivo significa costruire una sola pagina che si adatta a qualunque schermo, da un telefono stretto a un monitor largo, invece di creare un sito mobile separato. Si basa su tre idee: un layout fatto di larghezze flessibili invece che fisse, contenuti multimediali che si ridimensionano dentro i loro contenitori e media query che correggono il layout nei punti in cui smette di funzionare. Flexbox e la griglia fanno già buona parte del lavoro, come hanno mostrato le ultime due unità con le schede che vanno a capo e le colonne auto-fill.

Il meta tag viewport

Molti telefoni disegnano le pagine in un viewport virtuale più largo dello schermo (MDN cita come esempio 980 pixel) e poi rimpiccioliscono il risultato, perché i siti più vecchi erano pensati per i computer fissi. Per una pagina progettata per adattarsi è un ostacolo: una media query che dovrebbe attivarsi sotto i 600 pixel non scatta mai, perché il browser crede che lo schermo sia largo 980 pixel. <meta name="viewport" content="width=device-width"> nella head dice al browser di usare la larghezza reale del dispositivo, misurata in pixel CSS. Non aggiungere mai user-scalable=no o un maximum-scale basso: MDN avverte che bloccare lo zoom esclude le persone ipovedenti, e WCAG 1.4.4 richiede che il testo si possa ingrandire fino al 200 per cento.

Larghezze fluide e immagini

Le larghezze fisse sono la causa più comune dello scorrimento laterale sui telefoni. Preferisci max-width a width: max-width: 70rem su un contenitore di pagina gli permette di riempire uno schermo piccolo e di smettere di crescere su uno grande. Per impostazione predefinita le immagini mantengono la loro dimensione naturale in pixel, quindi una foto di 1200 pixel esce da uno schermo di 390 pixel. img { max-width: 100%; height: auto; } permette alle immagini di rimpicciolirsi per stare nel contenitore mantenendo le proporzioni. WCAG 1.4.10, Reflow, chiede che il contenuto funzioni a una larghezza di 320 pixel CSS senza scorrere in due direzioni; controllare la pagina in una finestra larga 320 pixel è una buona abitudine.

Media query

Una media query racchiude regole che valgono solo quando una condizione è vera. @media (min-width: 600px) { ... } applica le sue regole quando il viewport è largo almeno 600 pixel. Il metodo abituale è mobile first: si scrivono gli stili di base per uno schermo stretto, che spesso sono i più semplici (una colonna, tutto in pila), e poi si aggiungono query min-width che riorganizzano gli elementi man mano che lo spazio cresce. Scegli i breakpoint dove il contenuto comincia a non funzionare, non indovinando le dimensioni dei dispositivi più diffusi, perché ogni anno compaiono nuove dimensioni di schermo. Scrivere i breakpoint in em, per esempio 40em, li fa reagire anche quando chi legge ingrandisce il testo.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Altre cose che una query può chiedere

Le media query possono controllare più della larghezza. Le caratteristiche sulle preferenze di chi legge vengono da Media Queries Level 5: (prefers-color-scheme: dark) è vera quando chi legge ha scelto un tema scuro nel sistema operativo, così puoi offrire colori scuri in automatico. (prefers-reduced-motion: reduce) è vera quando chi legge ha chiesto meno movimento, spesso perché le animazioni gli danno le vertigini; al suo interno disattiva i movimenti ampi e gli effetti parallasse. (hover: hover), del Level 4, dice se il puntatore principale può passare sopra gli elementi, cosa che un touch screen non può fare. print dà uno stile alla pagina per la carta, per esempio nascondendo il menu. Infine, clamp() dimensiona gli elementi in modo graduale senza query: font-size: clamp(1.5rem, 4vw, 2.5rem) cresce con lo schermo ma non scende mai sotto 1.5rem né supera 2.5rem.