CSS3: Media Queries

Post aggiornato in data 13 Aprile 2020

Con l’avvento dei dispositivi mobili si è resa necessaria l’adozione di nuovi strumenti per i fogli di stile. Ne abbiamo visto uno molto importante con l’utilizzo del viewport. Un secondo metodo, da perseguire con l’utilizzo di viewport medesimo, sono le media queries o media rules.

Questo strumento è supportato dai maggiori browser, compreso Internet explorer dalla versione 9. In realtà il comando permette molte altre funzionalità, come ad esempio costruire delle regole CSS per versione stampabile, quello che vedremo in questo articolo è la possibilità di costruire regole CSS diverse a seconda dello schermo utilizzato dall’utente finale. Queste regole, combinate assieme permetteranno la creazione di un tema responsive.

Vediamo questa porzione di codice:

/* Desktop PC */
@media only screen and (max-width: 1210px) {
     .div { width:80vw; }
}

/* Tablet */
@media only screen and (max-width: 970px) {
     .div { width:90vw; }
}

/* Smartphone 6" */
@media only screen and (max-width: 600px) {
     .div { width:98vw; }
}

/* Smartphone 4" */
@media only screen and (max-width: 300px) {
     .div { width:100vw; }
}

Come si può vedere viene presentato il comando @media only screen seguito da una opzione che è il max-width e una indicazione in pixel. In sostanza il foglio di stile legge l’ampiezza del display e se questa ha una misurazione massima entro tale valore numerico, eseguirà il codice CSS in esso contenuto. Infatti faccio notare che il comando @media prevede l’utilizzo delle graffe. All’interno di queste il codice CSS classico, che a sua volta prevede altre graffe nidificate.

Il codice così composto con vari livelli di massima larghezza, permette di fatto di creare regole personalizzate a seconda della larghezza che ha lo schermo. E’ come se stessimo costruendo implicitamente un costrutto switch o if else concatenato. Se lo schermo è inferiore a 300px utilizzeremo la regola più bassa, a 650px quella relativa ai tablet fino ad arrivare alla regola per i desktop. Nel caso il display sia superiore a 1210px verrà comunque eseguita quest’ultima poiché non ne esiste una superiore.

All’interno di ognuna di queste regole possiamo giocare con i vari parametri a nostra discrezione, ovvero possiamo modificare il div content per tutti, oppure avere delle classi che possono essere resettate a livelli superiori o inferiori.

L’opzione max-width ovviamente non è l’unica, benché di fatto sia la più utilizzata, ma esiste una larga scelta di opzioni:

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements?
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements?
inverted-colors	Is the browser or underlying OS inverting colors?
light-level	Current ambient light level
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per “color” on a monochrome (greyscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per “color” on a monochrome (greyscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per “color” on a monochrome (greyscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available?
update	How quickly can the output device modify the appearance of the content
width	The viewport width