Media queries

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

Compatibilità browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!