Il miglior tutorial CSS3 Media Queries Nel 2024, in questo tutorial puoi imparare tipi di media CSS2,CSS3 Media Queries,Supporto per il browser,sintassi di query Multimedia,tipi di supporto CSS3,Semplici esempi di inchiesta multimediale,di riferimento @media CSS3,
@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.
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:
Allo stato attuale, molti per il telefono di Apple, telefono Android, tablet e altri dispositivi saranno utilizzati per visualizzare la query.
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione di proprietà.
proprietà | |||||
---|---|---|---|---|---|
@media | 21,0 | 9.0 | 3.5 | 4.0 | 9.0 |
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:
valore | descrizione |
---|---|
tutto | Usato per tutti i tipi di dispositivi multimediali |
stampa | per le stampanti |
schermo | Per schermi di computer, tablet, smartphone. |
discorso | Per i lettori di schermo |
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:
Scopri di più contenuti multimediali può fare riferimento @media regole.