Nella lezione precedente ci siamo soffermati sulle regole di base delle media queries. Per sfruttarne al meglio tutto il potenziale, però, è fondamentale conoscere le caratteristiche dei media su cui si può intervenire per indirizzare un foglio di stile.
Width
width designa la larghezza dell'area di visualizzazione del documento. Su un normale browser web essa è rappresentata dal viewport e non ha nulla a che vedere con le dimensioni dello schermo del dispositivo.
I valori di width possono essere espressi con qualunque unità di misura.
@media screen and (width: 400px) {
/* regole CSS */
}width può essere preceduta dai prefissi min- e max-, ottenendo così min-width e max-width. È proprio così che esplica tutta la sua utilità, specie nella realizzazione di layout. La seguente espressione, per esempio, applica un certo stile quando le dimensioni sono comprese tra 400px e 1024px:
@media screen and (min-width: 400px) and (max-width: 1024px) {
/* regole CSS */
}A puro titolo esemplificativo abbiamo creato questa demo:
#box1 {
background: #4c74be;
width: 300px;
padding: 30px;
border-top-left-radius: 20px;
margin-bottom: 40px;
color: black;
}
@media screen and (min-width: 400px) and (max-width: 1024px) {
#box1 {
color: red;
}
}Il div #box1 ha il testo nero, ma nella media query abbiamo scritto: quando la larghezza della finestra è compresa tra 400px e 1024px il testo diventa rosso. Provate a ridimensionare la finestra per verificare.
Height
height designa l'altezza dell'area di visualizzazione del documento. Come nel caso di width può essere definita con i prefissi min- (min-height) e max- (max-height).
Device-width
Con device-width si descrive la larghezza dell'intera area di rendering di un dispositivo. Su un computer o su un dispositivo mobile si intende la larghezza dell'intero schermo del dispositivo, non semplicemente quindi dell'area di visualizzazione del documento!
Accetta i prefissi min- (min-device-width) e max- (max-device-width).
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css" type="text/css" />Device-height
Descrive l'altezza dell'intera area di rendering di un dispositivo. Accetta i prefissi min- e max-.
Orientation
La caratteristica orientation indica se il dispositivo di output è in modalità landscape (la larghezza è maggiore dell'altezza) oppure portrait (l'altezza è maggiore della larghezza). I valori che può assumere sono appunto landscape o portrait.
Nell'esempio la definizione di media queries con cui si servono CSS ad hoc ad un iPad a seconda se si trovi in modalità landscape o portrait:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css" type="text/css" />Aspect-ratio
Definisce il rapporto tra la larghezza (width) e l'altezza (height) dell'area di visualizzazione di un documento. Può assumere i prefissi min- e max-.
I valori si esprimono attraverso due numeri interi separati dal simbolo /: 3/4, 16/9, etc.
Device-spect-ratio
Descrive il rapporto tra la larghezza (device-width) e l'altezza (device-height) dell'area di rendering di un dispositivo. Può assumere i prefissi min- e max-.
@media screen and (device-aspect-ratio: 16/9) {
/* regole CSS */
}Con questa media query creiamo una regola CSS che si applica solo a schermi con un rapporto di 16/9.
Color
Tecnicamente questa caratteristica indica il numero di bit per ciascuna componente colore sul dispositivo di output. color infatti può assumere come valori dei numeri interi, assumendo che 0 designa un dispositivo che non supporta il colore.
Nella pratica, comunque, salvo che non si abbiano esigenze molto specifiche, si può usare nella sua forma più semplice, andando così a indirizzare i CSS ai dispositivi che supportano il colore:
@media all and (color) {
/* regole CSS */
}Color-index
Descrive il numero di colori presenti nella tavolozza supportata da un certo dispositivo. Può assumere i prefissi min- e max-.
<link rel="stylesheet" media="all and (min-color-index: 256)" href="colore.css" />Secondo questa media query, il foglio di stile colore.css sarà applicato su dispositivi che supportano come minimo una tavolozza di 256 colori.
Monochrome
Indica il numero di bit per pixel su un dispositivo monocromatico (a scala di grigi).
Resolution
Descrive la risoluzione (ovvero la densità di pixel) del dispositivo di output. I valori della risoluzione possono essere espressi in dpi (punti per pollice) oppure in dpcm (punti per centimetro). Può assumere i prefissi min- e max-.
@media print and (min-resolution: 300dpi) {
/* regole CSS */
}Scan
Si tratta di una caratteristica valida per gli schermi televisivi, quindi per il tipo di media tv. Indica il tipo di scansione, interlacciata o progressiva. I valori possono essere progressive oppure interlace.
Grid
Indica se il dispositivo è di tipo bitmap oppure 'a griglia', come certi terminali monocromatici e gli schermi per cellulari con un solo font.
Tabella del supporto sui browser
| Media queries |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| width | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| height | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| device-width | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| device-height | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| device-aspect-ratio | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| color | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 10.5+ |
| color-index | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 10.5+ |
| monochrome | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 10.5+ |
| resolution | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 10.5+ |
| orientation | 9.0+ | 3.5+ | 4.0+ | 2.0+ | No |
| aspect-ratio | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.5 |
| scan | 9.0+ | No | No | No | 10.5 |
| grid | 9.0+ | No | No | No | 10.5 |