interrogazione @media CSS3
Esempi
Se il documento larghezza inferiore a 300 pixel è quello di modificare la presentazione di sfondo (background-color):
body {
background-color: azzurro;
}
}
Prova »
Definizioni e uso
Utilizzare @media query, è possibile definire stili diversi per i diversi tipi di supporto.
@media può essere impostato per lo schermo diversi formati stili diversi, soprattutto se è necessario impostare progettazione pagine responsive, @ dei media è molto utile.
Quando si azzera la dimensione del browser del processo, la pagina sarà ri-rendering della pagina in base alla larghezza e l'altezza del browser.
Supporto per il browser
I dati nella tabella indicano le regole @media supporto prima il numero di versione del browser.
regola | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Sintassi
CSS-Code;
}
È inoltre possibile utilizzare i fogli di stile diversi per diversi media:
Tipo di supporto
valore | descrizione |
---|---|
tutto | Per tutti i dispositivi |
auricolare | Obsoleto. Per la voce e sintetizzatore vocale |
braille | Obsoleto. attrezzature Braille utilizzato in contatto-feedback |
sbalzato | Obsoleto. apparati di stampa cieca per la stampa |
palmare | Obsoleto. Per i dispositivi palmari o dispositivi più piccoli, come PDA e piccolo telefono |
stampa | Per le stampanti e anteprima di stampa |
proiezione | Obsoleto. Per le apparecchiature di proiezione |
schermo | Per schermi di computer, tablet PC, smartphone e simili. |
discorso | Applicato ai lettori di schermo e altre attrezzature audio |
tty | Obsoleto. Per il fissaggio della griglia di caratteri, quali il telegrafo, apparecchiature terminali e limitatezza del dispositivo portatile |
TV | Obsoleto. Per la TV e Web TV |
funzionalità multimediali
valore | descrizione |
---|---|
aspetto-ratio | Definire il dispositivo di uscita nella regione visibile della larghezza di pagina al rapporto di altezza |
colore | Definire il dispositivo di uscita di ciascun gruppo il numero del colore originale. Se non è un dispositivo a colori, il valore è uguale a 0 |
colore-index | Il numero di voci nella tabella look-up di colore è definito nel dispositivo di uscita. Se non si utilizza una tabella di ricerca del colore, il valore è uguale a 0 |
Dispositivo-aspect-ratio | dispositivo di output definizione dello schermo larghezza visibile al rapporto di altezza. |
Dispositivo-altezza | dispositivo di output definizione dello schermo altezza visibile. |
device-width | dispositivo di output definizione dello schermo larghezza visibile. |
griglia | Dispositivo di uscita usato per interrogare se la griglia o reticolo. |
altezza | Definire il dispositivo di uscita nella regione del visibile dell'altezza della pagina. |
max-aspect-ratio | dispositivo di output definizione dello schermo visibile rapporto massimo tra larghezza e altezza. |
max-colore | Definire il numero massimo di dispositivi di output ogni serie di originali a colori. |
max-color-index | Il numero massimo di voci nella tabella look-up di colore è definito nel dispositivo di uscita. |
max-device-aspect-ratio | dispositivo di output definizione dello schermo visibile rapporto massimo tra larghezza e altezza. |
max-device-height | Schermo definire i dispositivi di uscita visibili alla massima altezza. |
max-device-width | dispositivo di output definizione dello schermo larghezza massima visibile. |
max-height | Definire il dispositivo di uscita nella regione visibile dello altezza massima della pagina. |
max-in bianco e nero | È definita in un quadro monocromatico buffer contiene per pixel è il numero massimo di monocromatica originale. |
max-risoluzione | Massima risoluzione definisce il dispositivo. |
max-width | Definire il dispositivo di uscita nella regione del visibile della larghezza massima della pagina. |
min-aspect-ratio | Definire il dispositivo di uscita nell'area della pagina rapporto minimo visibile tra larghezza e altezza. |
min-colore | Definire il dispositivo di uscita ogni numero minimo stabilito del colore originale. |
min-color-index | Il numero minimo di voci nella tabella look-up di colore è definito nel dispositivo di uscita. |
min-device-aspect-ratio | Schermo definire il rapporto minimo dispositivi di output visibile tra larghezza e altezza. |
min-device-width | dispositivi di uscita dello schermo definiti larghezza minima visibile. |
min-device-height | Minimo definire schermo altezza visibile del dispositivo di uscita. |
min-height | Definire il dispositivo di uscita nella regione del visibile dell'altezza minima della pagina. |
min-in bianco e nero | Il numero minimo di originali a colori è definita in un buffer di quadro monocromatico contiene per pixel |
min-risoluzione | La risoluzione minima definisce il dispositivo. |
min-width | Definire il dispositivo di uscita nella regione del visibile della larghezza minima della pagina. |
monocromatico | È definita in un frame buffer in bianco e nero contiene per pixel monocromatico numero originale. Se non è un dispositivo monocromatico, il valore è uguale a 0 |
orientamento | Definire il dispositivo di uscita nella regione del visibile dell'altezza della pagina è maggiore o uguale alla larghezza. |
risoluzione | Definire la risoluzione del dispositivo. Come ad esempio: 96 dpi, 300 dpi, 118dpcm |
scansione | Processo di digitalizzazione tipo Definition TV di attrezzature. |
larghezza | Definire il dispositivo di uscita nella regione del visibile della larghezza della pagina. |
Altri esempi
Esempi
Utilizzare @media query per creare responsive design:
.gridmenu {
width: 100%;
}
.gridmain {
width: 100%;
}
.gridright {
width: 100%;
}
}
Prova »
Pagine correlate
Tutorial CSS: tipi di supporto CSS