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 |