CSS3: Media Queries

CSS3: Media Queries

di Pubblicato: 6 marzo 2018 2 commenti

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

Non ci sono commenti al momento

sezione commenti aperta al pubblico
  1. giorgio
    #1 giorgio 13 giugno, 2018, 14:12

    Dove bisogna inserire questo codice? dopo il viewport e prima tra i due head?

    Rispondi a questo commento

Rispondi

This site uses Akismet to reduce spam. Learn how your comment data is processed.