UX & Coding

Media Queries CSS per progettare template responsive

"Le Media Queries sono fondamentali per gestire il comportamento delle pagine a seconda del tipo di dispositivo o basandosi su parametri specifici come la risoluzione dello schermo o la larghezza del browser"

Le Media Queries (conosciute anche come Media Query) sono dichiarazioni CSS con le quali è possibile identificare il tipo di dispositivo o una sua caratteristica allo scopo di applicare stili o condizioni differenti in base ad un elenco di regole.

Servono ad esempio, per gestire comportamenti diversi su risoluzioni differenti (nascondere un elemento o cambiarne la grandezza su schermi piccoli) o per modificare la strutturazione di un documento in fase di stampa (eliminando advertising o il menu di navigazione inutile su carta/pdf).

Per le loro caratteristiche sono uno strumento molto utilizzato quando si sviluppa in ottica Responsive.

Media Queries anteprima

Utilizzo delle Media Queries CSS

Possono essere di più tipi e sono composte principalmente da due elementi, il media-type e il media-features che vengono utilizzati in più combinazioni per ottenere regole e risultati diversi.

Media Queries struttura
Una Media Queries può incorporare infinite proprietà e stili CSS

Tipi di Media Queries

La tipologia (media-type) indica la categoria di un dispositivo e se non viene espressamente indicata verrà usata la corrispondenza più generica possibile.

all
Identifica tutti i dispositivi.
print
È destinata alla modalità di stampa, quindi modificherà un documento o una pagina nella sua versione stampabile.
screen
Per gli schermi, i tablet o gli smartphone.
speech
Dedicata ai sintetizzatori vocali o per gli screen reader che leggono la pagina ad alta voce.

Le Media Features

Le media-features sono dichiarazioni utilizzate nelle Media Queries che consentono di intercettare particolari caratteristiche o “stati” del dispositivo utilizzato.

L’elenco completo ne riporta tantissime ma quelle più utili possono essere riassunte in questa tabella:

ValoreCosa identifica?
widthLa larghezza esatta dell’area di visualizzazione
heightL’altezza esatta dell’area di visualizzazione
min-widthLa larghezza minima dell’area di visualizzazione
min-heightL’altezza minima dell’area di visualizzazione
max-widthLa larghezza massima dell’area di visualizzazione
max-heightL’altezza massima dell’area di visualizzazione
orientationL’orientamento del dispositivo (landscape o portrait per dispositivi mobili)

La modalità di utilizzo più elementare, che può andare bene nella maggior parte dei casi, ha lo scopo di manipolare la visibilità o lo stile degli elementi basandosi sulla larghezza massima (max-width) del dispositivo.

@media all and (max-width: 1690px) { ...}
@media all and (max-width: 1280px) { ...}
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }

Ognuna di queste regole sostanzialmente è valida per qualsiasi dispositivo (per via dell’uso di all) ed è applicata fintanto che la larghezza dell’area di visualizzazione non supera un determinato valore espresso in px.

Quando queste condizioni non sono rispettate verrà attivata una Media Queries differente o più semplicemente verranno ereditati gli stili di base.

Media Queries layout

I valori utilizzati nell’esempio non sono da considerare come di riferimento: device diversi possono avere caratteristiche molto diverse (basta pensare alla differenza di risoluzione tra un iPhone 5 e un iPhone X).

È quindi fondamentale pensare in fase di progettazione a quali dispositivi ci si stia realmente rivolgendo per trovare la regola più corretta.

Operatori logici

Gli operatori logici sono utilizzati per strutturare una Media Queries che rispetta più di una condizione alla volta. Ne esistono di quattro tipi:

and
Combina più condizioni che devono essere rispettate nello stesso momento
not
Per creare una regola di esclusione (è necessario indicare il media-type)
only
Applica le regole solo se esiste una corrispondenza diretta (è necessario indicare il media-type)
, (virgola)
È utilizzata per combinare più Media Queries in un’unica regola; ogni dichiarazione, separata dalla virgola, verrà analizzata singolarmente (quindi basta che una delle condizioni sia vera)

Ad esempio utilizzando l’operatore logico and è possibile lavorare anche su un range di dimensioni specificando l’intervallo minimo (min-width) e massimo (max-width).

/* Schermi grandi o ad alta risoluzione */
@media all and (max-width: 1690px) { ... }

/* Schermi Desktop o Portatili */
@media all and (min-width: 1280px) and (max-width: 1689px) { ... }

/* Tablet in modalità orizzontale */
@media all and (min-width: 737px) and (max-width: 1279px) { ... }

/* Tablet in modalità verticale */
@media all and (min-width: 481px) and (max-width: 736px) { ... }

/* Smartphone o piccoli Tablet */
@media all and (max-width: 480px) { ... }

Questa sintassi aiuta a intercettare e proporre delle variazioni più specifiche dell’interfaccia basate sul riconoscimento della risoluzione.

In questo modo verranno definiti dei breakpoint, ovvero dei punti su una linea immaginaria (che va da 0 a infinito) in cui una condizione inizierà ad essere vera e di conseguenza verranno applicati tutti gli stili al suo interno.

Media Queries breakpoint
Un'interfaccia può fare uso di breakpoint differenti e personalizzati

Inclusione delle Media Queries

Ci sono principalmente tre modi per richiamare e utilizzare le Media Queries che si basano sull’integrazione nel codice HTML o all’interno dei CSS.

Attraverso l’inclusione del foglio stile direttamente nel codice HTML (all’interno del tag <head>), come si fa normalmente per qualsiasi altro CSS.

/* Stile per la stampa */
<link rel="stylesheet" media="print" href="print.css" />

/* Stile per schermi piccoli */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css" />

Oppure con l’ausilio della regola @import che consente di integrare un secondo foglio stile richiamandolo direttamente da quello principale.

/* Stile per la stampa */
@import url("print.css") print;

Entrambi questi metodi condividono un aspetto negativo legato alla velocità e alle prestazioni che è bene tenere a mente.

A causa del posizionamento in alto (nel primo caso) e del richiamo di una risorsa aggiuntiva (se parliamo di integrazione tramite CSS) si costringe il browser a scaricare e analizzare il foglio stile in un punto critico del caricamento o ad effettuare il download di un file aggiuntivo (ne consegue una richiesta supplementare al server).

Non è di certo un enorme problema, sopratutto se i fogli stile o gli stili utilizzati per personalizzare la User Experience sono pochi ma è bene conoscere questo aspetto tecnico e valutare come procedere.

Il metodo migliore di inclusione delle Media Queries segue esattamente la logica di “gerarchia a cascata” tipica dei CSS.

Prima vengono dichiarate le regole più generali condivise da tutti gli elementi, e alla fine si utilizzano le specifiche @media per adattare e o modificare l’interfaccia a seconda del dispositivo.

/* Stili condivisi */
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 120%;
color: #000;
}

/* Stile per la stampa */
@media print {
img {
display: none;
}
}

/* Stile per schermi piccoli */
@media screen and (max-width: 480px) {
html {
font-size: 19px;
line-height: 150%;
}
}

In questo modo la gestione degli stili rimane in un unico CSS (evitando richieste multiple) che da priorità alle proprietà generali per poi applicare le regole nelle Media Queries allo scopo di personalizzare la pagina.

Display retina o alta risoluzione

Usando le Media Queries è possibile identificare anche gli schermi ad alta risoluzione o i cosiddetti Retina riconoscendo il dispositivo a seconda della densità dei pixel dello schermo.

@media (min-resolution: 192dpi)  { ... }

Purtroppo la specifica ufficiale min-resolution non funziona con i browser basati WebKit: è quindi necessario di usare la proprietà di WebKit specifica chiamata -webkit-min-device-pixel-ratio per determinare la densità dei pixel usando il rapporto.

Uno schermo a risoluzione “standard” ha un rapporto in pixel di 1, mentre uno ad alta risoluzione del doppio o maggiore. Ogni browser ha delle specifiche leggermente differenti.

/* Webkit (Alta risoluzione) */
@media (-webkit-min-device-pixl-ratio: 2) { ... }

/* Mozilla (Alta risoluzione) */
@media (min--moz-device-pixel-ratio: 2) { ... }

/* Opera (Alta risoluzione) */
@media (-o-min-device-pixel-ratio: 2/1) { ... }

Per essere certi di intercettare tutti i dispositivi/browser con queste caratteristiche si può utilizzare una regola concatenando tutti i tipi di condizione.

Questa integra tutte le più utilizzate:

/* Cross-browser & Cross-device*/
@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) { ... }

Vista la costante uscita sul mercato di dispositivi a risoluzione sempre maggiore è sempre meglio verificare che non ci siano nuovi valori di riferimento per le Media Queries.

Esempi di utilizzo

Le regole possono essere utilizzate e mescolate in modi molto differenti e questo permette di interagire facilmente con qualsiasi tipo di situazione.

Solo dispositivi screen e al massimo fino a 800px di altezza.

@media only screen and (max-height: 800px) { ... }

Tutti i dispositivi ad eccezione del media-type di tipo print e che hanno una larghezza di almeno 640px.

@media not print and (min-width: 640px) { ... }

Tutti i dispositivi con un’altezza minima di 680px oppure tutti gli schermi con orientamento portrait (che corrisponde all’orientamento verticale nel caso di smartphone ad esempio).

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Questi i breakpoint della griglia di Bootstrap 4.

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Supporto dei client email

Le Media Queries possono essere molto comode quando si parla di email o DEM dato che anche in questo ambito può essere estremamente utile manipolare il template per ottenere il migliore risultato tra dispositivi differenti.

Non tutti i client di posta sono in grado di interpretarle correttamente ma ad oggi il loro supporto è abbastanza diffuso sia in ambito desktop che mobile.

Media Queries supporto email

Campaign Monitor, nota piattaforma di email marketing, mette a disposizione un media queries database per verificare rapidamente non solo il supporto alla regola @media dei rispettivi client, ma anche la singola compatibilità dei media-type e media-features.

Unisciti alla community! Rimani aggiornato, scopri le migliori guide e ricevi risorse gratuite.



Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.