Regola CSS @media
Usa la regola @media per applicare stili in base alle media query. Scopri come usare questa proprietà con esempi pratici.
La regola at-rule @media applica un blocco di stili solo quando una media query restituisce true — ad esempio, solo su schermi più stretti di un telefono, o solo quando un documento viene stampato. È il fondamento del responsive web design: un unico foglio di stile che si adatta a desktop, laptop, tablet e telefoni cellulari invece di distribuire un sito separato per ogni dispositivo.
Questa pagina illustra la sintassi di @media, i tipi di media e le funzionalità media disponibili, come combinare le condizioni con gli operatori logici, e include esempi eseguibili che puoi ridimensionare per vederne l'effetto.
Come si costruisce una media query
Una media query è composta da due parti:
- Un tipo di media opzionale —
all,print,screenospeech— che individua una categoria di dispositivo. - Una o più funzionalità media tra parentesi, come
(min-width: 768px), che verificano una condizione come lawidthdel viewport, la suaheight, l'orientamento o la risoluzione.
Se il tipo di media corrisponde al dispositivo corrente e ogni funzionalità restituisce true, gli stili all'interno del blocco vengono applicati. Una funzionalità media assomiglia a una proprietà CSS (nome: valore), ma verifica una condizione anziché applicare stili direttamente a un elemento.
Quando usare questa regola? Ogni volta che si vuole che il layout, la spaziatura o la visibilità cambino in base al dispositivo — impilare colonne sui telefoni, nascondere una barra laterale su schermi piccoli, o rimuovere i colori di sfondo quando una pagina viene stampata.
In JavaScript, l'interfaccia CSSMediaRule rappresenta una singola regola @media e può essere utilizzata per leggere o modificare le regole create con @media.
Sintassi
CSS @media
@media <media-query> {
/* styles */
}Le media query possono combinare più condizioni utilizzando operatori logici: and, not, only e la virgola (,).
Esempio della regola @media:
CSS @media code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (max-width: 411px) {
body {
background-color: #cce5ff;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #eee;
}
}
@media screen and (max-width: 962px) and (min-width: 450px),
(min-width: 1366px) {
body {
background-color: #333;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Resize the browser to see the effect.</p>
<p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
</body>
</html>Risultato
Nell'esempio seguente, quando la larghezza del browser è compresa tra 500 e 800px oppure supera i 1000px, l'aspetto del <div> cambia. Ridimensiona la finestra del browser per vedere l'effetto.
Esempio della regola @media con aspetto modificato di <div>:
CSS @media multiple queries example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (min-width: 200px) {
body {
background-color: #8ebf42;
}
}
@media screen and (min-width: 600px) {
body {
background-color: #ccc;
}
}
@media screen and (max-width: 800px) and (min-width: 500px),
(min-width: 1000px) {
div.box {
font-size: 50px;
padding: 50px;
border: 8px solid #000;
background: #eee;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
<h3>Change the appearance of DIV on different screen sizes</h3>
<div class="box">DIV</div>
</body>
</html>Combinare le condizioni con gli operatori logici
Le media query possono concatenare più condizioni:
and— tutte le condizioni devono essere vere:@media screen and (min-width: 768px).,(virgola) — funziona comeor; gli stili si applicano se almeno una delle query separate da virgola corrisponde:@media (max-width: 600px), (min-width: 1200px).not— nega un'intera query:@media not all and (monochrome).only— nasconde la query ai browser molto vecchi che non supportano le funzionalità media; non ha alcun effetto nei browser moderni, ma è innocuo includerlo.
Tipi di media
| Valore | Descrizione |
|---|---|
| all | Questo valore viene usato per tutti i dispositivi. È il valore predefinito di questa proprietà. |
| Viene usato per le stampanti. | |
| screen | Viene usato per gli schermi di computer a colori. |
| speech | Viene usato per gli altoparlanti. |
Esempio di utilizzo di media per nascondere un elemento su dispositivi extra piccoli:
CSS @media Rule
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style>
@media (max-width: 767px) {
.hide-mobile {
display: none;
}
}
</style>
</head>
<body>
<h1>Hi</h1>
<p>There is some text for example.</p>
<p class="hide-mobile">This text will be hidden on large devices.</p>
<p>There is some text for example.</p>
</body>
</html>Esempio di utilizzo di media per cambiare il colore di sfondo del contenuto su dispositivi diversi.
CSS @media Rule
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@media screen and (max-width: 767px) {
.content {
background-color: lightblue;
padding: 30px;
}
}
@media screen and (min-width: 768px) {
.content {
background-color: pink;
padding: 10px;
}
}
@media screen and (min-width: 800px) {
.content {
background-color: lightgreen;
color: white;
padding: 50px;
}
}
</style>
</head>
<body>
<div class="content">
<h2>Resize the browser to see the effect.</h2>
<p>
CSS is a rule-based language, which means that you define
rules specifying groups of styles applying to particular
elements or groups of elements on the web page.
</p>
</div>
</body>
</html>Funzionalità media
Le funzionalità media verificano una caratteristica specifica del dispositivo o del viewport. Di gran lunga le più comuni nel responsive design quotidiano sono quelle basate su width — min-width e max-width — ma l'elenco completo seguente copre tutto, dall'orientamento del dispositivo alla profondità del colore e al meccanismo di input. Le funzionalità ad intervallo (width, height, aspect-ratio, color, resolution, monochrome) accettano anche i prefissi min- e max-.
| Valore | Descrizione |
|---|---|
| width | La larghezza del viewport. |
| height | L'altezza del viewport. |
| orientation | L'orientamento del viewport. |
| aspect-ratio | Il rapporto tra il valore della funzionalità media "width" e il valore della funzionalità media "height". |
| grid | Verifica se il dispositivo di output usa una griglia o una bitmap. |
| color | Il numero di bit per componente colore del dispositivo di output. Se il dispositivo non è a colori, il valore è 0. |
| color-gamut | L'intervallo approssimativo di colori supportati dall'agente utente e dal dispositivo di output. |
| inverted-colors | Verifica se il browser o il sistema operativo sottostante inverte i colori o meno. |
| hover | Verifica se il meccanismo di input principale consente all'utente di passare il cursore sugli elementi o meno. |
| any-hover | Verifica se il meccanismo di input disponibile consente all'utente di passare il cursore sugli elementi o meno. |
| any-pointer | Verifica se il meccanismo di input disponibile è un dispositivo puntatore o meno. |
| light-level | Il livello di luce dell'ambiente circostante. |
| max-aspect-ratio | Il rapporto massimo tra la larghezza e l'altezza dell'area di visualizzazione. |
| max-color | Il numero massimo di bit per componente colore per il dispositivo di output. |
| max-height | L'altezza massima dell'area di visualizzazione. |
| max-monochrome | Il numero massimo di bit per colore su un dispositivo monocromatico. |
| max-resolution | La risoluzione massima del dispositivo. |
| max-width | La larghezza massima dell'area di visualizzazione. |
| min-aspect-ratio | Il rapporto minimo tra la larghezza e l'altezza dell'area di visualizzazione. |
| min-color | Il numero minimo di bit per componente colore per il dispositivo di output. |
| min-height | L'altezza minima dell'area di visualizzazione. |
| min-monochrome | Il numero minimo di bit per colore su un dispositivo monocromatico. |
| min-resolution | La risoluzione minima del dispositivo. |
| min-width | La larghezza minima dell'area di visualizzazione. |
| overflow-block | Verifica come il dispositivo di output gestisce il contenuto che supera il viewport lungo l'asse di blocco. |
| overflow-inline | Verifica se il contenuto che supera il viewport lungo l'asse inline può essere scorso o meno. |
| pointer | Verifica se il meccanismo di input principale è un dispositivo puntatore o meno. |
| resolution | Descrive la risoluzione del dispositivo di output. |
| scripting | Verifica se lo scripting è disponibile o meno. |
| update | Verifica con quale rapidità il dispositivo di output può modificare l'aspetto del contenuto. |