Esempio
Cambiare il colore di sfondo, se la finestra è larga 480 pixel o più ampia:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La regola @media è usato per definire regole di stile diversi per i diversi mezzi di comunicazione tipi / dispositivi.
In CSS2 questo è stato chiamato tipi di media, mentre in CSS3 è chiamato media query.
media query guardare la capacità del dispositivo, e possono essere utilizzati per verificare molte cose, come:
- larghezza e l'altezza della finestra
- larghezza e altezza del dispositivo
- orientamento (is the tablet/phone in landscape or portrait mode?)
- risoluzione
- e altro ancora
Supporto per il browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente la regola @media.
| Proprietà | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Sintassi
@media not|onlymediatype and (media feature){
CSS-Code;
}Si può anche avere i fogli di stile diversi per diversi media:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Tipi di media
| Valore | Descrizione |
|---|---|
| all | Utilizzato per tutti i dispositivi del tipo di supporto |
| aural | Deprecato. Utilizzato per la voce e sintetizzatori audio |
| braille | Deprecato. Utilizzato per i dispositivi tattili braille |
| embossed | Deprecato. Utilizzato per le stampanti braille paging |
| handheld | Deprecato. Utilizzato per i dispositivi di piccole dimensioni o palmari |
| Usato per le stampanti | |
| projection | Deprecato. Utilizzato per le presentazioni proiettate, come diapositive |
| screen | Utilizzato per schermi di computer, tablet, smart-phone, ecc |
| speech | Usato per screen reader che "reads" la pagina ad alta voce |
| tty | Deprecato. Utilizzato per i media che utilizzano una griglia di carattere a passo fisso, come telescriventi e terminali |
| tv | Deprecato. Usato per dispositivi di tipo televisivo |
Caratteristiche multimediali
| Valore | Descrizione |
|---|---|
| aspect-ratio | Il rapporto tra la larghezza e l'altezza della finestra |
| color | Il numero di bit per componente di colore per il dispositivo di output |
| color-index | Il numero di colori il dispositivo può visualizzare |
| device-aspect-ratio | Il rapporto tra la larghezza e l'altezza del dispositivo |
| device-height | L'altezza del dispositivo, come uno schermo di computer |
| device-width | La larghezza del dispositivo, come uno schermo di computer |
| grid | Se il dispositivo è una griglia o bitmap |
| height | L'altezza viewport |
| max-aspect-ratio | Il rapporto massimo tra la larghezza e l'altezza dell'area di visualizzazione |
| max-color | Il numero massimo di bit per componente di colore per il dispositivo di output |
| max-color-index | Il numero massimo di colori il dispositivo può visualizzare |
| max-device-aspect-ratio | Il rapporto massimo tra la larghezza e l'altezza del dispositivo |
| max-device-height | L'altezza massima del dispositivo, come uno schermo di computer |
| max-device-width | La larghezza massima del dispositivo, come uno schermo di computer |
| max-height | L'altezza massima dell'area di visualizzazione, come ad esempio una finestra del browser |
| max-monochrome | Il numero massimo di bit per "color" in una in bianco e nero (greyscale) dispositivo |
| max-resolution | La risoluzione massima del dispositivo, utilizzando dpi o DPCM |
| max-width | La larghezza massima dell'area di visualizzazione, come ad esempio una finestra del browser |
| min-aspect-ratio | Il rapporto minimo tra la larghezza e l'altezza dell'area di visualizzazione |
| min-color | Il numero minimo di bit per componente di colore per il dispositivo di output |
| min-color-index | Il numero minimo di colori il dispositivo può visualizzare |
| min-device-aspect-ratio | Il rapporto minimo tra la larghezza e l'altezza del dispositivo |
| min-device-width | La larghezza minima del dispositivo, come uno schermo di computer |
| min-device-height | L'altezza minima del dispositivo, come uno schermo di computer |
| min-height | L'altezza minima dell'area di visualizzazione, come ad esempio una finestra del browser |
| min-monochrome | Il numero minimo di bit per "color" in una in bianco e nero (greyscale) dispositivo |
| min-resolution | La risoluzione minima del dispositivo, utilizzando dpi o DPCM |
| min-width | La larghezza minima dell'area di visualizzazione, come ad esempio una finestra del browser |
| monochrome | Il numero di bit per "color" in una in bianco e nero (greyscale) dispositivo |
| orientation | L'orientamento della finestra (landscape or portrait mode) |
| overflow-block | Come funziona il contenuto maniglia dispositivo di output che trabocca la finestra lungo l'asse del blocco (added in Media Queries Level 4) |
| overflow-inline | Può contenuti che trabocca la finestra lungo l'asse in linea far scorrere (added in Media Queries Level 4) |
| resolution | La risoluzione del dispositivo di output, utilizzando dpi o DPCM |
| scan | Il processo di scansione del dispositivo di uscita |
| update-frequency | In quanto tempo può il dispositivo di uscita modificare l'aspetto del contenuto (added in Media Queries Level 4) |
| width | La larghezza viewport |
Altri esempi
Esempio
Utilizzare la regola @media per rendere responsive design:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Prova tu stesso " Pagine correlate
Tutorial CSS: CSS Media Queries