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 Working Draft  
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
Supporto basico  
1.0 (Yes) 1.0 (1.7) 9.0 9.0 3.1

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: mipo
 Ultima modifica di: mipo,