Le media queries è uno strumento molto potente per utilizzare fogli di stile specifici non solo in base ai dispositivi di utilizzo ma anche in base a diverse caratteristiche degli stessi.
Per definizione una media query:
" consiste nella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media” .
Esistono diversi tipi di media:
- all: il CSS si applica a tutti i dispositivi;
- screen: schermo del computer;
- print: si applica ad una pagina di stampa;
- projection: presentazioni e proiezioni;
- speech: dispositivi a sintesi vocale;
- braille: supporti basati sull’uso del braille;
- embossed: stampanti braille;
- handheld: dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche;
- tty: dispositivi a carattere fisso come i terminali;
- tv: visualizzazione su schermi televisivi.
Se in una media query non si dichiara alcun tipo di media di quelli visti sopra, allora la regola o il CSS è rivolto a tutti i tipi di media. in pratica, il valore di default di una media è all.
Si usano anche gli operatori logici and, not, only.
Esistono tre modi per dichiarare una madia query.
1) Tramite l'elemento link
ad esempio:
<link rel="stylesheet" media="print" href="/stampa.css" />indica che il foglio di stile "stampa.css" è usato solo per la pagine di stampa.
2) In un foglio di stile tramite l'attributo @media
ad esempio:
@media print {
/* qui vanno le regole CSS */
}3) Attraverso l'attributo @import
ad esempio:
@import url(stampa.css) print;Per sfruttarne al meglio tutto il potenziale delle media query è fondamentale conoscere le caratteristiche dei media su cui si può intervenire per indirizzare un foglio di stile.
1) Width
width indica l'area di visualizzazione del documento (viewport) e non le dimensioni dello schermo del dispositivo che stiamo usando, ad esempio:
@media screen and (width: 400px) {
/* regole CSS */
}indica che le regole css andranno applicate quando la viewport ha una larghezza di 400px, si può usare qualunque unità di misura.
width si può usare con i prefissi min- e max-, min-width indica la larghezza minima, mentre max-width indica la larghezza massima, in questo esempio:
@media screen and (min-width: 400px) and (max-width: 1024px) {
/* regole CSS */
}le regole css verranno applicate quando il viewport sarà compreso tra 400px e 1024px.
2) Height
height indica l’altezza dell’area di visualizzazione del documento.
Come per width può essere definita con i prefissi min- (min-height) e max- (max-height).
3) Device-Width
device-width a differenza di width indica la larghezza dello schermo del dispositivo e non semplicemente l'area di visualizzazione del documento, esempio:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="/layout_iphone.css" type="text/css" />per i dispositivi con schermo di larghezza minima 480px si applica il foglio di stile "layout_iphone.css".
Anche per device-width valgono i prefissi min- e max- .
4) Device-Height
device-height si riferisce all'altezza dello schermo del dispositivo di visualizzazione, anche in questo caso si usano i presiffi min- e max- .
5) Orientation
orientation indica se il dispositivo di output è in modalità landscape oppure portrait, nel primo caso la larghezza è maggiore dell'altezza mentre nel secondo caso l'altezza è maggiore della larghezza, ad esempio:
<link rel="stylesheet" media="all and (min-device-width: 480px) and (max-device-width: 1024px) and (orientation:portrait)" href="/portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 480px) and (max-device-width: 1024px) and (orientation:landscape)" href="/landscape.css" type="text/css" />il primo css "portrait.css" verrà applicato a tutti i dispositivi per una larghezza compresa tra 480px e 1024px e a quelli che hanno un'altezza maggiore della larghezza.
6) Aspect-Ratio
aspect-ratio indica il rapporto tra la larghezza e l'altezza, può assumere i prefissi min- e max- e viene indicato con due numeri separati da "/": 16/9, 3/4.
device-spect-ratio indica il rapporto tra device-width e device-height, si utilizza con i prefissi min- e max-, ad esempio:
@media screen and (device-aspect-ratio: 3/4) {
/* regole CSS */
}indica che le regole specificate verranno applicate a schermi con risoluzione dello schermo di 3/4.
7) Color
color indica il numero di bit per ciascuna componente colore sul dispositivo di output.
Può assumere come colore "0" e in questo caso significa che il dispositivo non supporta nessun colore, ad esempio:
@media screen and (color) {
/* regole CSS */
}indica che le regole css sono applicate a tutti i dispositivi che supportano colore.
8) Color-Index
color-index indica il numero di colori presenti nella tavolozza supportata da un certo dispositivo, si usa con i prefisi min- e max- , ad esempio:
<link rel="stylesheet" media="screen and (min-color-index: 256)" href="/style.css" />indica che il css "style.css" verrà applicato a tutti gli schermi con un numero minimo di colori di 256.
9) Monochrome
monochrome indica il numero di bit per pixel su un dispositivo monocromatico (a scala di grigi).
10) Resolution
resolution indica la risoluzione, cioè 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).
Si usa con i prefissi min- e max- .
11) Scan
scan viene applicato al media tv e può avere valore progressive oppure interlace.
12) Grid
grid indica se il dispositivo è di tipo bitmap oppure ‘a griglia’, come certi terminali monocromatici e gli schermi per cellulari con un solo font.