Query sui media CSS
CSS2 ha introdotto i tipi di media
La @mediaregola, introdotta nei CSS2, ha permesso di definire regole di stile differenti per differenti tipi di media.
Esempi: potresti avere una serie di regole di stile per gli schermi dei computer, una per le stampanti, una per i dispositivi palmari, una per i dispositivi di tipo televisivo e così via.
Sfortunatamente questi tipi di supporto non hanno mai ricevuto molto supporto dai dispositivi, a parte il tipo di supporto di stampa.
CSS3 ha introdotto le query multimediali
Le media query in CSS3 hanno esteso l'idea dei tipi di media CSS2: invece di cercare un tipo di dispositivo, esaminano la capacità del dispositivo.
Le media query possono essere utilizzate per controllare molte cose, come ad esempio:
- larghezza e altezza della finestra
- larghezza e altezza del dispositivo
- orientamento (il tablet/telefono è in modalità orizzontale o verticale?)
- risoluzione
L'uso delle media query è una tecnica popolare per fornire un foglio di stile personalizzato a desktop, laptop, tablet e telefoni cellulari (come iPhone e telefoni Android).
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la @mediaregola.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintassi delle query multimediali
Una media query è costituita da un tipo di media e può contenere una o più espressioni, che si risolvono in true o false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Il risultato della query è true se il tipo di supporto specificato corrisponde al tipo di dispositivo su cui viene visualizzato il documento e tutte le espressioni nella media query sono true. Quando una media query è vera, vengono applicati il foglio di stile o le regole di stile corrispondenti, seguendo le normali regole a cascata.
A meno che non si utilizzino gli operatori non o solo, il tipo di supporto è facoltativo e il
alltipo sarà implicito.
Puoi anche avere diversi fogli di stile per diversi media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Tipi di media CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Esempi semplici di media query
Un modo per utilizzare le query multimediali è avere una sezione CSS alternativa all'interno del foglio di stile.
L'esempio seguente cambia il colore di sfondo in verde chiaro se il viewport è largo 480 pixel o più largo (se il viewport è inferiore a 480 pixel, il colore di sfondo sarà rosa):
Esempio
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
L'esempio seguente mostra un menu che fluttua a sinistra della pagina se il viewport è largo 480 pixel o più largo (se il viewport è inferiore a 480 pixel, il menu sarà in cima al contenuto):
Esempio
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Altri esempi di query multimediali
Per molti altri esempi sulle media query, vai alla pagina successiva: Esempi CSS MQ .
Riferimento CSS @media
Per una panoramica completa di tutti i tipi di media e le caratteristiche/espressioni, guarda la regola @media nel nostro riferimento CSS .