Scopri quali media query corrispondono al tuo schermo in questo momento, aggiornate mentre ridimensioni. Range syntax, prefers-color-scheme, movimento ridotto, hover e pointer, breakpoint e container query.
Una media query applica il CSS solo quando una condizione sul dispositivo o sulle impostazioni dell'utente è vera. @media (width >= 48rem) { ... } si rivolge agli schermi più larghi; prefers-color-scheme, prefers-reduced-motion, hover e pointer descrivono impostazioni e input. Scrivi prima gli stili per gli schermi piccoli, poi aggiungi query min-width per i layout più grandi.
Le query più usate
Il pannello qui sotto esegue sedici query tramite window.matchMedia nel tuo browser e si aggiorna quando ridimensioni la finestra, ruoti il telefono o attivi la modalità scura. Più sotto: la range syntax, le query sulle preferenze dell'utente, le query sull'input, i breakpoint dei framework e quando una container query è lo strumento migliore.
Un modo più breve di scrivere le condizioni sulla larghezza con operatori di confronto: (width >= 600px) invece di (min-width: 600px), e (400px <= width < 900px) per un intervallo. È supportata in tutti i principali browser attuali; Safari l'ha aggiunta nella 16.4 nel 2023, quindi controlla caniuse se supporti dispositivi più vecchi.
I fogli di stile mobile-first usano min-width: gli stili di base servono gli schermi piccoli e ogni query aggiunge layout per quelli più larghi. Così il CSS per schermi piccoli resta semplice. max-width va bene per piccole eccezioni, ma usarli entrambi allo stesso breakpoint può lasciare un vuoto o una sovrapposizione di un pixel; la range syntax con < e >= lo evita.
Usa @media (prefers-color-scheme: dark) e ridefinisci al suo interno le variabili dei colori. In JavaScript, window.matchMedia('(prefers-color-scheme: dark)').matches dà la stessa risposta, e il suo evento change scatta quando l'utente cambia tema.
Le media query guardano il viewport e il dispositivo. Le container query guardano la dimensione di un elemento genitore contrassegnato con container-type. Una card che deve cambiare layout quando la sua colonna è stretta, ovunque venga posizionata, ha bisogno di una container query.
Cause comuni: manca il meta tag viewport, quindi i telefoni fingono di essere larghi circa 980px; la query si trova sopra la regola che dovrebbe sovrascrivere e perde per ordine nel sorgente; oppure manca uno spazio o una parentesi, il che invalida silenziosamente l'intera condizione.
Valori presi dalla documentazione ufficiale di Tailwind CSS v4 e Bootstrap 5. Quelli di Tailwind sono in rem, mostrati qui ai 16px predefiniti.
Breakpoint predefiniti in due framework popolari (min-width, mobile first)
La range syntax si legge come la matematica e rende facili gli intervalli che non si sovrappongono: < da un lato, >= dall'altro.
Piccole aggiunte che fanno sembrare un sito nativo su ogni dispositivo.
matchMedia restituisce un oggetto con matches e un evento change. È quello che usa il pannello dal vivo di questa pagina.
Come scegliere tra le due
Entrambe le card hanno lo stesso markup. Solo quella larga ha spazio per passare a un layout a riga. Modifica le larghezze per vederla cambiare.
Varianti di Tailwind v4 e il CSS che producono
Larghezza
Più stretto di Tailwind sm (640px con la dimensione del font predefinita)
Larghezza
Tra Tailwind sm e lg
Larghezza
Da Tailwind lg in su
Larghezza
Breakpoint tablet classico, vecchia sintassi
Orientamento
Viewport più alto che largo
Orientamento
Viewport più largo che alto
Input
L'input principale supporta l'hover (mouse, trackpad)
Input
L'input principale è impreciso (dito)
Input
L'input principale è preciso (mouse, stilo)
Input
Almeno un input supporta l'hover
Preferenza
Sistema impostato in modalità scura
Preferenza
L'utente ha chiesto meno movimento
Preferenza
L'utente ha chiesto più contrasto
Display
Schermo ad alta densità, 2x o più
Display
In esecuzione come web app installata
Display
Stampa o anteprima di stampa
Copia quelle corrispondenti
Viewport: {size}. Ridimensiona la finestra, ruota o cambia il tema di sistema e l'elenco si aggiorna.
misurazione in corso...
{w} x {h} px CSS, pixel ratio {r}x
Risultati delle media query dal vivo
Gruppo
Query
Corrisponde quando
Ora
Sì
No
n/a significa che questo browser non è riuscito a interpretare la query, cosa che succede con la range syntax nelle versioni più vecchie. Ti servono le dimensioni esatte del dispositivo? Prova lo
strumento della risoluzione dello schermo
Inizia gratis · Nessuna carta di credito richiesta