Regola @media CSS

Definizione e uso

La regola @media nelle query di media viene utilizzata per applicare stili diversi per diversi tipi di media/dispositivi.

Le query di media possono essere utilizzate per controllare molte cose, tra cui:

  • Larghezza e altezza della viewport
  • Larghezza e altezza dell'hardware
  • Orientamento (lo schermo del telefono o del tablet è in modalità orizzontale o verticale?)
  • Risoluzione

L'uso delle query di media è una tecnica popolare per fornire tabelle di stili personalizzati per desktop, laptop, tablet e smartphone (progettazione web responsive).

È possibile utilizzare le query di media per definire stili che si applicano solo ai documenti stampabili o ai lettori di schermo (mediatype: print, screen o speech).

Oltre al tipo di media, ci sono anche le caratteristiche dei media. Le caratteristiche dei media forniscono dettagli più specifici per le query di media, permettendo di testare le caratteristiche specifiche degli user agent o dei dispositivi di visualizzazione. Ad esempio, puoi applicare lo stile solo agli schermi con una larghezza maggiore o minore di una determinata misura.

Vedi anche:

Tutorial CSS:Query Media CSS

Tutorial CSS:Esempio di query di media CSS

Tutorial RWD:Realizzare un design web responsivo attraverso le query di media

Manuale JavaScript:Metodo window.matchMedia()

Esempio

Esempio 1

Se la larghezza della finestra del browser è di 600px o meno, cambia il colore di sfondo dell'elemento <body> in "blu chiaro":

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

prova personalmente

Puoi trovare più esempi TIY nella parte inferiore della pagina.

Sintassi CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Significato di not, only e and:

not: La parola chiave not invertisce il significato dell'intera query di media.

only: La parola chiave only impedisce agli browser obsoleti di applicare lo stile specificato, che non supportano le query di media con caratteristiche di media. Non ha alcun impatto sugli browser moderni.

and: La parola chiave and combina le caratteristiche dei media con il tipo di media o altre caratteristiche dei media.

Sono opzionali. Tuttavia, se si utilizza not o only, è necessario specificare anche il tipo di media.

Puoi anche utilizzare diversi fogli di stile per diversi media, come questo:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Tipo di media

Valore Descrizione
all Predefinito. Utilizzato per tutti i tipi di dispositivi di media.
print Utilizzato per stampanti.
screen Utilizzato per schermi dei computer, tablet, smartphone e altro.
speech Utilizzato per lettori di schermo per leggere le pagine web.

Caratteristiche dei media

Valore Descrizione
any-hover

Esiste qualsiasi meccanismo di input disponibile che permetta agli utenti (come il mouse) di hover su un elemento?

Aggiunto nel Media Queries Level 4.
any-pointer

Esistono qualsiasi dispositivo di input tra i meccanismi di input disponibili, e se esiste, quanto è precisa la sua precisione?

Aggiunto nel Media Queries Level 4.
aspect-ratio Il rapporto larghezza/altezza del viewport (area di visualizzazione).
color

Il numero di bit per pixel dell'output del dispositivo, comuni sono 8, 16, 32 bit.

Il valore è 0 se il dispositivo non supporta l'output a colori.
color-gamut

L'estensione del gamut di colore supportata approssimativamente dall'agente utente e dall'output del dispositivo.

Aggiunto nel Media Queries Level 4.
color-index

Il numero di voci nella tabella di ricerca dei colori (color lookup table) dell'output del dispositivo.

Il valore è 0 se il dispositivo non utilizza la tabella di ricerca dei colori.
device-aspect-ratio

Il rapporto larghezza/altezza dell'output del dispositivo.

È stato deprecato nel livello 4 delle Media Queries.
device-height

L'altezza della superficie di rendering dell'output del dispositivo (ad esempio lo schermo).

È stato deprecato nel livello 4 delle Media Queries.
device-width

La larghezza della superficie di rendering dell'output del dispositivo (ad esempio lo schermo).

È stato deprecato nel livello 4 delle Media Queries.
display-mode

Il modello di visualizzazione dell'applicazione, come specificato dal membro display del manifest web app.

Definito nella spec Web App Manifest.
forced-colors

Se l'agente utente limita la tavola dei colori.

Aggiunto nel Media Queries Level 5.
grid Se l'output del dispositivo utilizza uno schermo a griglia o uno schermo a matrice.
height L'altezza del viewport (area di visualizzazione).
hover

Se il meccanismo di input principale permette agli utenti di posizionare il mouse sopra l'elemento?

Aggiunto nel Media Queries Level 4.
inverted-colors

Se il browser o il sistema operativo di base ha invertito i colori.

Aggiunto nel Media Queries Level 5.
light-level

Il livello di luce attuale dell'ambiente.

Aggiunto nel Media Queries Level 5.
max-aspect-ratio La massima proporzione tra larghezza e altezza dell'area di visualizzazione.
max-color Il numero massimo di bit per ogni componente di colore dell'output del dispositivo.
max-color-index Il numero massimo di colori che il dispositivo può visualizzare.
max-height L'altezza massima dell'area di visualizzazione, ad esempio la finestra del browser.
max-monochrome Il numero massimo di bit per ogni 'colore' su dispositivi monocromatici (grigio).
max-resolution La massima risoluzione del dispositivo, espressa in dpi o dpcm.
max-width La larghezza massima dell'area di visualizzazione, ad esempio la finestra del browser.
min-aspect-ratio La minima proporzione tra larghezza e altezza dell'area di visualizzazione.
min-color Il numero minimo di bit per ogni componente di colore dell'output del dispositivo.
min-color-index Il numero minimo di colori che il dispositivo può visualizzare.
min-height L'altezza minima dell'area di visualizzazione, ad esempio la finestra del browser.
min-monochrome Il numero minimo di bit per ogni 'colore' su dispositivi monocromatici (grigio).
min-resolution Risoluzione minima del dispositivo, utilizzando dpi o dpcm.
min-width Larghezza minima dell'area di visualizzazione, ad esempio la finestra del browser.
monochrome

Profondità di bit di ogni pixel nel buffer di frame monocromatico dell'output del dispositivo.

Se il dispositivo non ha uno schermo a singolo colore, il valore è 0.
orientation Direzione di rotazione della viewport (modalità orizzontale o verticale).
overflow-block

Come l'output del dispositivo gestisce il contenuto che si spinge oltre la viewport (viewport) lungo l'asse blocco.

Aggiunto nel Media Queries Level 4.
overflow-inline

Il contenuto che si spinge oltre la viewport (viewport) lungo l'asse inline può essere scollato?

Aggiunto nel Media Queries Level 4.
pointer

Il meccanismo di input principale è un dispositivo puntatore? Se sì, quanto è precisa la sua precisione?

Aggiunto nel Media Queries Level 4.
prefers-color-scheme

Rileva se l'utente tende a scegliere un schema di colori chiaro o scuro.

Aggiunto nel Media Queries Level 5.
prefers-contrast

Rileva se l'utente desidera aumentare o ridurre la contrasto tra colori simili richiesto al sistema.

Aggiunto nel Media Queries Level 5.
prefers-reduced-motion

Se l'utente desidera che ci siano meno effetti dinamici sulla pagina.

Aggiunto nel Media Queries Level 5.
prefers-reduced-transparency

Se l'utente tende a scegliere una trasparenza più bassa.

Aggiunto nel Media Queries Level 5.
resolution Risoluzione dell'output del dispositivo, utilizzando dpi o dpcm.
scan Processo di scansione dell'output del dispositivo (adatto a televisioni ecc.).
scripting

Rileva se lo scripting (ad esempio JavaScript) è disponibile.

Aggiunto nel Media Queries Level 5.
update

Frequenza con cui l'output del dispositivo aggiorna il rendering del contenuto.

Aggiunto nel Media Queries Level 4.
width Larghezza della viewport (viewport).

Più esempi

Esempio 2

Quando la larghezza del browser è di 600px o inferiore, nascondi l'elemento:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

prova personalmente

Esempio 3

Se la larghezza della viewport è di 800 pixel o superiore, utilizza la query media per impostare il colore di sfondo in lavanda; se la larghezza della viewport è compresa tra 400 e 799 pixel, utilizza la query media per impostare il colore di sfondo in verde chiaro. Se la viewport è inferiore a 400 pixel, il colore di sfondo è azzurro chiaro:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: verde chiaro;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavanda;
  }
}

prova personalmente

Esempio 4

Crea un menu di navigazione responsive (visualizzato orizzontalmente su grandi schermi e verticalmente su schermi piccoli):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

prova personalmente

esempio 5

Crea una layout di colonne responsive utilizzando le query media:

/* Da quattro colonne a due colonne in uno schermo di 992px o più piccolo */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* In uno schermo con larghezza inferiore o uguale a 600 pixel, fa stackare le colonne invece di posizionarle in parallelo */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

prova personalmente

esempio 6

Crea un sito web responsive utilizzando le query media:

prova personalmente

esempio 7

Le query media possono anche essere usate per cambiare la layout della pagina in base alla direzione del browser. Puoi scrivere un gruppo di proprietà CSS che si applicano solo quando la larghezza della finestra del browser è maggiore dell'altezza (cioè la direzione orizzontale).

Usa lo sfondo di colore chiaro se la direzione è in modalità orizzontale:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

prova personalmente

esempio 8

Imposta il colore del testo utilizzando le query media in modo che il testo sia verde quando il documento viene visualizzato sullo schermo e nero quando viene stampato:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

prova personalmente

esempio 9

elenco separato da virgola: usa la virgola per aggiungere un'altra query media a una query media esistente (il suo comportamento è simile all'operatore OR):

/* Modifica l'aspetto del <div> quando la larghezza è tra 600px e 900px o maggiore di 1100px */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

prova personalmente

supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente @media rule.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9