Tipi di media CSS2 Introdotto
Il @media regola, introdotta nel CSS2, ha permesso di definire regole di stile diversi per i diversi tipi di supporto.
Esempi: Si potrebbe avere un insieme di regole di stile per schermi di computer, uno per le stampanti, una per dispositivi palmari, una per i dispositivi di tipo televisivo, e così via.
Purtroppo questi tipi di supporto non ha mai avuto un sacco di sostegno da dispositivi, diversi dal tipo di supporto di stampa.
CSS3 introduce Media Queries
media query in CSS3 estendere la CSS2 tipi di media idea: Invece di cercare un tipo di dispositivo, guardano la capacità del dispositivo.
media query possono essere utilizzati per controllare molte cose, come ad esempio:
- larghezza e l'altezza della finestra
- larghezza e altezza del dispositivo
- orientamento (è il tablet / telefono in modalità orizzontale o verticale?)
- risoluzione
query multimediali utilizzando sono una tecnica popolare per la consegna di un foglio di stile su misura per tablet, iPhone, e androidi.
Supporto per il browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente la regola @media.
| Proprietà | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Media query Sintassi
Una media query è costituito da un tipo di supporto e può contenere una o più espressioni, che volontà di vero o falso.
@media not|onlymediatype and (expressions) {
CSS-Code;
}Il risultato della query è vero se il tipo di supporto specificato corrisponda al tipo di dispositivo viene visualizzato sul documento e tutte le espressioni della media query sono vere. Quando una query media è vero, le regole del foglio di stile o stile corrispondenti vengono applicati, seguendo le normali regole di cascata.
A meno che non si utilizzano gli operatori non o solo, il tipo di supporto è facoltativo e il all tipo sarà implicita.
Si può anche avere i fogli di stile diversi per diversi media:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">Tipi CSS3 media
| Valore | Descrizione |
|---|---|
| all | Utilizzato per tutti i dispositivi del tipo di supporto |
| Usato per le stampanti | |
| screen | Utilizzato per schermi di computer, tablet, smart-phone, ecc |
| speech | Usato per screen reader che "legge" la pagina ad alta voce |
Media Queries semplici esempi
Un modo per usare le media query è quello di avere una sezione CSS alternativo a destra all'interno del vostro foglio di stile.
Il seguente esempio modifica il background-color al verde chiaro se la finestra è larga 480 pixel o maggiore (se la finestra è inferiore a 480 pixel, il background-color sarà rosa):
Esempio
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Prova tu stesso " L'esempio seguente mostra un menu che galleggia sulla sinistra della pagina, se la finestra è larga 480 pixel o maggiore (se la finestra è 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;}
}
Prova tu stesso " CSS3 @media di riferimento
Per una panoramica completa di tutti i tipi di media e le funzioni / espressioni, si prega di guardare il @media regola nel nostro riferimento CSS.