Al fine di implementare responsive web design, è importante capire media query in CSS, in particolare media only e media screen query.

Iniziamo con la domanda ovvia.

Che cos’è una query multimediale?

Una media query è una tecnica introdotta in CSS3. La query prevede l’utilizzo della regola @media per eseguire un blocco di proprietà CSS nel caso in cui una condizione predeterminata sia vera.

Ad esempio, il codice seguente impone che se la finestra del browser è 400px o meno, il colore di sfondo sarà verde chiaro:

@media only screen e (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

Le query multimediali sono particolarmente utili con l’aggiunta di punti di interruzione per il design reattivo. Poiché i punti di interruzione sono essenzialmente numeri di pixel in cui il contenuto o il design appaiono in modo diverso agli utenti, le query multimediali vengono utilizzate per definire quali modifiche devono verificarsi in quali pixel.

Nell’esempio seguente, il codice indica che se la finestra del browser è ridotta al di sotto di 600px, ogni larghezza della colonna dovrebbe diventare 100%:

/* Per desktop: */
.col-1 {larghezza: 8,33%;}
.col-2 {larghezza: 16,66%;}
.col-3 {larghezza: 25%;}
.col-4 {larghezza: 33,33%;}
.col-5 {larghezza: 41,66%;}
.col-6 {larghezza: 50%;}
.col-7 {larghezza: 58,33%;}
.col-8 {larghezza: 66,66%;}
.col-9 {larghezza: 75%;}
.col-10 {larghezza: 83,33%;}
.col-11 {larghezza: 91,66%;}
.col-12 {width :100%;}

@media solo schermo e (max-width: 600px) {
/* Per i telefoni cellulari: * /
{
width: 100%;
}
}

Ogni media query è costituita da un tipo di media opzionale e da una o più espressioni di funzionalità multimediali. È possibile combinare più query multimediali con operatori logici. Tutte le query multimediali sono case-sensitive.

Ogni query multimediale viene considerata vera quando il tipo di supporto specificato corrisponde ai dispositivi su cui viene visualizzato il sito web. Inoltre, anche le espressioni delle funzionalità multimediali devono essere vere.

Qual è la query media-screen?

La query @media screen significa semplicemente che la query in questione è destinata agli schermi a colori o ai dispositivi che supportano una modalità “schermo”.

Facciamo un esempio:

@media screen and (max-width:500px)

La query precedente si applica a schermi con una larghezza massima di 500 pixel. Il punto di questo è principalmente quello di indirizzare il codice a distinguere tra “schermo” e altri tipi di supporti (come stampa, braille, rilievo, palmare, ecc.).

Qual è la query solo multimediale?

Aggiungendo l’operatore logico ‘solo’ alla media query, lo sviluppatore assicura che la query venga applicata solo se l’intera condizione corrisponde. Se non si utilizza solo, i browser meno recenti potrebbero non leggere o interpretare tutte le espressioni delle funzionalità multimediali. Ad esempio, se la query è

@media screen e (max-width:500px)

i browser più vecchi possono interpretare la query come solo screen e ignorare il numero di pixel. Ciò porterebbe all’applicazione della condizione di query su tutte le schermate. Per evitare ciò, è possibile utilizzare:

@media only screen e (max-width:500px)

Quando si utilizza l’unico operatore, assicurarsi di specificare il tipo di supporto.

Significato nel responsive design

Le query multimediali sono strumentali nell’implementazione del responsive web design. Le query discusse sopra sono due di quelle più comunemente utilizzate e sono utili per garantire che il contenuto del tuo sito Web sia ottimizzato per dimensioni e tipi di dispositivi.

Dopo aver utilizzato le query CSS sul tuo sito web, assicurati di verificarne l’efficacia. Il modo più semplice per farlo è utilizzare uno strumento che ti consente di testare il design del tuo sito Web su dispositivi e browser reali. Ci sono diversi strumenti per facilitare questo, ma prenditi il tuo tempo per trovare un correttore reattivo online che ti dà l’opportunità di testare su una varietà sufficientemente ampia di dispositivi, sia desktop che mobili.