Query media CSS

CSS2 ha introdotto i tipi di media

CSS2 ha introdotto @media Le regole che rendono possibile definire regole di stile diverse per diversi tipi di media.

Ad esempio: potresti avere un insieme di regole di stile per schermi di computer, un insieme per stampanti, un insieme per dispositivi portatili, persino un insieme per televisioni, ecc.

Sfortunatamente, oltre al tipo di media per la stampa, questi tipi di media non sono mai stati supportati su larga scala dai dispositivi.

CSS3 ha introdotto le query media

Le query media in CSS3 espandono il concetto di tipi di media in CSS2: invece di cercare il tipo di dispositivo, si concentrano sulle capacità del dispositivo.

Le query media possono essere utilizzate per controllare molte cose, come ad esempio:

  • Larghezza e altezza della viewport
  • Larghezza e altezza del dispositivo
  • Orientamento (se il tablet o lo smartphone sono in modalità orizzontale o verticale)
  • Risoluzione

L'uso delle query media è una tecnica popolare che permette di fornire fogli di stile personalizzati per desktop, laptop, tablet e smartphone (ad esempio iPhone e smartphone Android).

Supporto del browser

I numeri nella tabella indicano il supporto completo @media La versione del browser in cui le regole sono state introdotte per la prima volta.

Proprietà
@media 21.0 9.0 3.5 4.0 9.0

Sintassi delle query media

Le query media consistono in un tipo di media e possono includere una o più espressioni, che possono essere解析ate come true o false.

@media not|only mediatype and (espressioni) {
  Codice CSS;
}

Se il tipo di media specificato corrisponde al tipo di dispositivo sul quale il documento è visualizzato e tutte le espressioni nella query media sono true, il risultato della query è true. Quando la query media è true, viene applicato il foglio di stile o la regola di stile corrispondente e vengono seguiti i normali regoli di cascata.

A meno che tu non utilizzi l'operatore not o only, il tipo di media è opzionale e implicito all Tipi.

Puoi anche utilizzare fogli di stile diversi per diversi tipi di media:

<link rel="stylesheet" media="mediatype and|not|only (espressioni)" href="print.css">

Tipi di media CSS3

Valore Descrizione
all Per tutti i tipi di dispositivi medi.
print Per stampanti.
screen Per schermi di computer, tablet, smartphone e molto altro.
speech Per i lettori di schermo che leggono a voce alta la pagina.

Esempio semplice di query media

Un metodo per utilizzare le query media è avere un sezione CSS di riserva all'interno della tabella di stili.

Il seguente esempio cambia il colore di sfondo in verde chiaro quando la larghezza della viewport è di 480 pixel o superiore (se la viewport è inferiore a 480 pixel, il colore di sfondo sarà rosa):

Esempio

@media schermo and (larghezza minima: 480px) {
  body {
    background-color: lightgreen;
  }
}

Prova da solo

Il seguente esempio mostra un menu, che si posiziona a sinistra della pagina se la larghezza della viewport è di 480 pixel o superiore (se la viewport è inferiore a 480 pixel, il menu si posiziona in alto rispetto al contenuto):

Esempio

@media schermo and (larghezza minima: 480px) {
  #leftsidebar {larghezza: 200px; flottante: sinistro;}
  #main {margine sinistro: 216px;}
}

Prova da solo

Più esempi di query media

Per ulteriori esempi di query media, visita la pagina successiva:Esempio MQ CSS.

Manuale di riferimento @media CSS

Per un'elencazione completa di tutti i tipi di media e delle caratteristiche/espressioni, consulta la nostra Regola @media nel riferimento CSS.