“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.
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.
Le Media Features ed Operatori logici
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:
Valore | Cosa identifica? |
---|---|
width |
La larghezza esatta dell’area di visualizzazione |
height |
L’altezza esatta dell’area di visualizzazione |
min-width |
La larghezza minima dell’area di visualizzazione |
min-height |
L’altezza minima dell’area di visualizzazione |
max-width |
La larghezza massima dell’area di visualizzazione |
max-height |
L’altezza massima dell’area di visualizzazione |
orientation |
L’orientamento del dispositivo (landscape o portrait per dispositivi mobili) |
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
).
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.
Devices
Nel seguente articolo sono stati esaminati per lo più i dispositivi Apple. Sebbene anche i dispositivi basati su OS Android siano importanti, hanno molte variazioni nella maggior parte dei telefoni.
Categoria dispositivo | Breakpoint Width | Nome dispositivo |
---|---|---|
Mobile, portrait | 320px |
iPhone SE |
375px |
iPhone 6 to X | |
414px |
iPhone 8 Plus | |
Mobile, landscape | 568px |
iPhone SE |
667px |
iPhone 6 to 8 | |
736px |
iPhone 8 Plus | |
812px |
iPhone X | |
Tablet, portrait | 768px |
iPad Air, iPad Mini, iPad Pro 9″ |
834px |
iPad Pro 10″ | |
Tablet, landscape | 1024px |
iPad Air, iPad Mini, iPad Pro 9″ |
1024px |
iPad Pro 12″ (portrait) | |
1112px |
iPad Pro 10″ | |
Laptop displays | 1366px |
HD laptops (768p) |
1366px |
iPad Pro 12″ (landscape) | |
1440px |
13″ MacBook Pro (2x ridimensionamento) | |
Desktop displays | 1680px |
13″ MacBook Pro (1.5x ridimensionamento) |
1920px |
1080p displays |
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.
/* Schermi grandi o ad alta risoluzione */
@media (min-width: 1920px) { ... }
/* Schermi Desktop o Portatili */
@media (min-width: 1441px) and (max-width: 1919px) { ... }
/* Schermi Desktop o Portatili */
@media (min-width: 1113px) and (max-width: 1440px) { ... }
/* Tablet in modalità orizzontale */
@media (min-width: 769px) and (max-width: 1112px) { ... }
/* Tablet in modalità verticale */
@media (min-width: 481px) and (max-width: 768px) { ... }
/* Smartphone o piccoli Tablet */
@media (max-width: 480px) { ... }