Le Media Queries sono un componente essenziale del disegno responsivo, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale). La direttiva @media
è usata per applicare stili condizionali a un documento.
Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo media
di un elemento <source>
, con il quale si può specificare quale sorgente usare per un elemento <picture>
.
Esiste inoltre il metodo Window.matchMedia()
che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare MediaQueryList.addListener()
per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.
Puoi saperne di più su come usare le media queries programmaticamente nell'articolo Testing media queries.
Referenze
Direttive
Guide
- Come usare le media queries
- Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.
- Come testare le media queries
- Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.
Specifiche
Specifica | Status | Commenti |
---|---|---|
CSS Conditional Rules Module Level 3 | Candidate Recommendation | |
Media Queries Level 4 | Candidate Recommendation | |
Media Queries | Recommendation | |
CSS Level 2 (Revision 1) | Recommendation | Definizione iniziale |
Compatibilità browser
Browser | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Supporto basico | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.2 | 1.3 |
Browser | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | ||
---|---|---|---|---|---|---|---|---|
|
1.0 | (Yes) | 1.0 (1.7) | 9.0 | 9.0 | 3.1 |