Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

CSS Responsive

Finora abbiamo scritto CSS che si applica sempre, indipendentemente dalla dimensione dello schermo. Ma un menu che sta bene su un monitor da 24 pollici spesso diventa scomodo su un telefono. Le media query permettono di applicare regole CSS diverse a seconda della larghezza dello schermo.

Note

In un epoca in cui si sviluppa ogni cosa pensando al web, al desktop e al mobile in maniera convergente (ovvero si cerca sempre di far coincidere il più possibile il codice delle applicazioni web, mobile e desktop) la logica con cui si modifica il comportamento della nostra applicazione è basata su un unico parametro: la larghezza dello schermo!!!

Media Query

La sintassi di base è molto semplice:

@media (max-width: 600px) {
    /* regole valide SOLO quando lo schermo è largo 600px o meno */
}

Tutto ciò che scrivi dentro le graffe della media query si applica solo se la condizione è vera. Fuori da quella condizione, valgono le regole “normali” scritte altrove nel foglio di stile.

Riprendiamo l’header con menu del capitolo precedente:

.menu {
    display: flex;
    gap: 20px;
}

@media (max-width: 600px) {
    .menu {
        flex-direction: column;
        gap: 10px;
    }
}

Su uno schermo largo, il layout resta quello del capitolo 6: titolo a sinistra, menu a destra. Sotto i 600px di larghezza (tipicamente un telefono), le stesse regole flex-direction: column che abbiamo già imparato impilano tutto verticalmente, uno sotto l’altro.

Warning

non abbiamo scritto CSS nuovo, solo le proprietà Flexbox che già conoscevamo, applicate condizionalmente. Le media query non sono un linguaggio a parte: sono un “se” che racchiude normali regole CSS.

Tip

Sostanzialmente è come un if in Python: se la condizione è vera si esegue il codice dentro il blocco è normale codice, cambia solo quando viene eseguito. Qui cambia a quali larghezze si applica.

viewport meta tag

Perché le media query funzionino correttamente su telefono, serve una riga nell’HTML, nel <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Senza questa riga, molti browser mobili mostrano la pagina “rimpicciolita” come se fosse su un monitor largo, e le media query non scattano mai come ci si aspetta. Va messa in ogni pagina, sempre.

Mobile-first o desktop-first?

Ci sono due approcci comuni:

/* Approccio "desktop-first": si parte dal layout grande, poi si corregge per schermi piccoli */
.menu {
    flex-direction: row;
}

@media (max-width: 600px) {
    .menu {
        flex-direction: column;
    }
}

/* Approccio "mobile-first": si parte dal layout piccolo, poi si arricchisce per schermi grandi */
.menu {
    flex-direction: column;
}

@media (min-width: 601px) {
    .menu {
        flex-direction: row;
    }
}

Per le dispense useremo l’approccio desktop-first (max-width) perché è più immediato da leggere quando si parte da un layout già scritto, come i nostri esempi.

Breakpoint comuni

Non esiste un numero “giusto” in assoluto, ma alcuni valori sono diventati convenzione:

@media (max-width: 600px) { /* smartphone */ }
@media (max-width: 900px) { /* tablet */ }

Per le nostre dispense basta un solo breakpoint a 600px: è sufficiente a distinguere “schermo piccolo” da “schermo normale” senza complicare troppo i primi esempi.

Esercizi

Esercizio w221

Aggiungi il meta tag viewport a una pagina HTML che non lo ha ancora.

Esercizio w222

Prendi l’header con menu del Capitolo 6 (Esercizio 6005) e aggiungi una media query che, sotto i 600px, impili titolo e menu in colonna (come nell’esempio di questo capitolo).

Esercizio w223

Nel seguente CSS la media query è scritta con min-width invece di max-width, quindi la colonna si attiva sugli schermi grandi invece che su quelli piccoli. Correggi il problema (mantenendo l’approccio desktop-first):

da_correggere.css
.menu {
    display: flex;
    flex-direction: row;
}

@media (min-width: 600px) {
    .menu {
        flex-direction: column;
    }
}

Esercizio w224

Aggiungi alla pagina del Progetto 1 (la scheda prodotto) un menu di navigazione in stile Capitolo 6, poi rendilo responsive: in colonna sotto i 600px, in riga sopra.