CSS3 Media Queries

tipi di media CSS2

@media regola è descritta nei CSS2, e può essere personalizzato per i diversi tipi di supporto regole di stile.

Ad esempio: è possibile impostare le regole di stile diversi per i diversi tipi di supporto (tra cui display, dispositivi portatili, televisori, ecc.)

Ma questi tipi di supporto multimediale su molti dispositivi ancora abbastanza amichevoli.

CSS3 Media Queries

interrogazione CSS3 multimediale eredita tutti i tipi di media CSS2 pensiero: Invece di trovare il tipo di attrezzatura, le impostazioni di visualizzazione in base al CSS3 adattamento.

media query possono essere utilizzati per rilevare molte cose, come ad esempio:

• la finestra (finestre) in larghezza e altezza
• Larghezza e l'altezza dell'apparecchiatura
• Verso (schermo orizzontale Smartphone, schermo verticale).
• risoluzione

Allo stato attuale, molti per il telefono di Apple, telefono Android, tablet e altri dispositivi saranno utilizzati per visualizzare la query.

Supporto per il browser

I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione di proprietà.

sintassi di query Multimedia

Richiesta Multimedia composto da una varietà di supporti, può contenere uno o più espressioni, espressione viene stabilito secondo le condizioni restituisce vero o falso.

@media not|only mediatype and (expressions) {
    CSS-Code;
}

Se il tipo di corrispondenza tipo di dispositivo di supporto specificato, la query restituisce true, il documento mostra l'effetto di stile specificato in un dispositivo di corrispondenza.

Se non si utilizza non solo l'operatore o in altro modo, tutti gli stili si adatteranno la visualizzazione su tutti i dispositivi.

• Non: non può essere utilizzato per escludere alcuni dispositivi, come ad esempio @media non stampare (materiale non stampa).

• solo: impostare alcuni tipi di supporti speciali.Supporto per Media Queries dispositivi mobili, se c'è solo una parola chiave, il browser Web per dispositivi mobili sarà ignorare l'unica parola chiave e l'espressione dopo l'applicazione direttamente dal file di stile. Per Media Query quando il dispositivo non supporta la capacità di leggere, ma Tipo di supporto tipo di browser Web, parola chiave incontrato ignora solo questo file di stile.

• tutto: tutti i dispositivi, questo dovrebbe sempre vedere.

È inoltre possibile utilizzare un diverso file di stile su diversi media:

tipi di supporto CSS3

Semplici esempi di inchiesta multimediale

Utilizzando le query multimediali può essere utilizzato per sostituire lo stile originale corrispondente allo stile sul dispositivo specificato.

Gli esempi che seguono cambiano i colori di sfondo sullo schermo dimensione della finestra visibile attrezzatura superiore a 480 pixel:

Gli esempi che seguono sono visibili nella dimensione della finestra schermo più grande di 480 pixel galleggia alla pagina menu di sinistra:

di riferimento @media CSS3

Scopri di più contenuti multimediali può fare riferimento @media regole.