Il sito responsive e le media queries

Questa pagina e` una continuazione della guida Come creare un sito da zero..

Tutti sapete che, nell'era di dispositivi mobili, un sito web deve imprescindibilmente essere responsive per ottenere la qualifica di "sito mobile friendly" e soddisfare il test di verifica di Google Search Console: https://search.google.com/test/mobile-friendly.
Nel corso della guida "Come creare un sito da zero" vi ho offerto dei layout responsive già predisposti per essere tali, ma credo sia importante, per un webmaster, approfondire il discorso e capire quali siano le caratteristiche e le regole che possono trasformare un sito web formato desktop in un sito web che si adatta a tutte le dimensioni dei vari schermi su cui può essere visualizzato.
Per godere di queste caratteristiche, un sito deve poter mantenere un layout corretto e stabile quale che sia il dispositivo utilizzato dal visitatore e deve anche poter modificare alcune caratteristiche del layout qualora la dimensione del dispositivo non permetta di mantenerle.
Un grande aiuto, per questo, ci viene dato dalle "media queries", quindi, cerchiamo subito di capire:
Cosa sono le media queries?
In coerenza con lo spirito di questo sito, cercherò di spiegarlo in modo semplice e comprensibile.
Le media queries sono delle regole uguali alle altre che si trovano nel foglio di stile, ma che vengono applicate solo e unicamente a determinate condizioni specificatamente indicate.
Facciamo subito un esempio:

Mettiamo di avere questa regola nel foglio di stile....

.box {
width: 600px;
}

..che determina che tutti gli elementi a cui viene applicata la classe box debbano avere la larghezza di 600px..
..e mettiamo di avere l'esigenza, per motivi di visualizzazione, che tale larghezza diminuisca quando lo schermo del dispositivo in uso è inferiore ad una certa dimensione.
Per esempio, potremmo scrivere cosí:
@media screen and (max-width: 800px) {
      .box {
      width: 400px;
      }      
}

Cosa abbiamo stabilito?
Che tutti gli elementi con classe "box", se la pagina viene visualizzata su un dispositivo che ha lo schermo di larghezza che va da 0 a 800px al massimo, dovranno avere la larghezza di 400px.
Questa regola sovrascriverà quella primaria indicata nel foglio di stile solo e se le caratteristiche di larghezza dello schermo saranno quelle indicate dalla media query.

Spero che questo primo esempio vi abbia cominciato a chiarire un pochino le idee.
Sfruttando questa proprietà del foglio di stile, possiamo determinare la larghezza sia dell'intero sito, sia degli elementi in esso contenuti e/o contenuti nelle singole pagine, adattandoli alla visualizzazione per qualunque dimensione dello schermo.

Mica male eh?

Le regole che si possono stabilire tramite le media queries, naturalmente, non sono limitate alle dimensioni degli elementi, ma possono essere applicate per modificare ogni regola del foglio di stile che sia applicata ad un qualunque elemento del sito o della pagina (color, font, border, shadow, background, ecc..). Non ci sono limiti.

È possibile indicare non solo la largezza massima dello schermo, ma anche la larghezza minima, oppure entrambe qualora si volesse definire un intervallo:

@media screen and (min-width: 600px)
@media screen and (min-width: 600px) and (max-width: 900px)

La sintassi che ho usato negli esempi è quella più comunemente utilizzata, ma ci sono altri tipi di sintassi, riassumendo:
  • @media                             (in genere utilizzato per indicare schermi piccoli)
  • @media screen and          (per tutti gli schermi con la specifica che si sta parlando di screen e non di altri media, es: print)
  • @media only screen and  (la keyword "only" indica che la regola deve essere ignorata se si tratta di vecchi browser)
È possibile aggiungere un numero indefinito di media queries, facendo attenzione, sempre, alla chiusura delle parentesi graffe e ordinandole secondo l'indicazione della larghezza, in calando. Oltre a questi tipi, ce ne sono altri molto più specifici che, se siete interessati, potrete trovare nelle guide in rete espressamente dedicate.
Voglio, però, parlarvi di..

@media print

..che serve a configurare la pagina per renderla idonea alla stampa.
Anche in questo caso, credo che un esempio chiarisca meglio delle parole:
@media print {
    body{
        margin:10px;
    }
   .column {
    width: 100%;
    }
    nav, sidebar, footer {
        display: none;
    } }

In questo modo, dico al browser che, quando l'utente clicca per avviare la stampa di una pagina (in qualunque modo lo faccia), l'anteprima di stampa dovrà soddisfare le regole inserite. Vale a dire, per l'esempio, che il body dovrà avere un margine di 10px, che la colonna centrale dovrà avere una larghezza del 100% e che le sezioni nav, sidebar e footer non dovranno essere visibili.

NOTA: affinchè le media queries funzionino correttamente, è non dovete dimenticare di inserire questo metatag nella zona head:

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

Questo metatag serve per comunicare al browser in che modo deve gestire la "viewport" (area di visualizzazione). In pratica, diciamo al browser di impostare la larghezza della viewport in base alla larghezza del dispositivo utilizzato dall'utente.







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Elenco argomenti della guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti