Media Queries CSS per progettare template responsive nel 2020

Home » Articoli » Media Queries CSS per progettare template responsive nel 2020
Condividi su facebook
Condividi su twitter
Condividi su linkedin
Condividi su pinterest

“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) { ... } 

L’articolo ti è piaciuto? Supportami con un like o una condivisione

Potrebbero interessarti anche i seguenti articoli