CSS @regola media
Esempio
Cambia il colore di sfondo dell'elemento <body> in "azzurro" quando la finestra del browser è larga 600px o meno:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La @media
regola viene utilizzata nelle media query per applicare stili diversi a diversi tipi di media/dispositivi.
Le media query possono essere utilizzate per controllare molte cose, come ad esempio:
- larghezza e altezza della finestra
- larghezza e altezza del dispositivo
- orientamento (il tablet/telefono è in modalità orizzontale o verticale?)
- risoluzione
L'uso delle media query è una tecnica popolare per fornire un foglio di stile su misura (web design reattivo) a desktop, laptop, tablet e telefoni cellulari.
È inoltre possibile utilizzare le media query per specificare che determinati stili sono solo per documenti stampati o per lettori di schermo (tipo di supporto: stampa, schermo o voce).
Oltre ai tipi di media, ci sono anche funzioni multimediali. Le funzionalità multimediali forniscono dettagli più specifici alle query multimediali, consentendo di testare una funzionalità specifica dell'agente utente o del dispositivo di visualizzazione. Ad esempio, puoi applicare stili solo a quelle schermate che sono maggiori o più piccole di una certa larghezza.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la regola @media.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
Sintassi CSS
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
significato delle parole chiave non , only e e :
not: la parola chiave not inverte il significato di un'intera media query.
only: l'unica parola chiave impedisce ai browser meno recenti che non supportano le query multimediali con funzionalità multimediali di applicare gli stili specificati. Non ha effetto sui browser moderni.
e: la parola chiave e combina una funzione multimediale con un tipo di media o altre funzioni multimediali.
Sono tutti opzionali. Tuttavia, se si utilizza not o only , è necessario specificare anche un tipo di supporto.
Puoi anche avere 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">
....
Tipi di media
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
Funzionalità multimediali
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Altri esempi
Esempio
Nascondi un elemento quando la larghezza del browser è 600px di larghezza o meno:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Esempio
Utilizzare mediaquery per impostare il colore di sfondo su lavanda se il viewport è largo 800 pixel o più largo, su verde chiaro se il viewport è largo tra 400 e 799 pixel. Se la finestra è inferiore a 400 pixel, il colore di sfondo è azzurro:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Esempio
Crea un menu di navigazione reattivo (visualizzato orizzontalmente su schermi grandi e verticalmente su schermi piccoli):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Esempio
Usa le media query per creare un layout di colonna reattivo:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Esempio
Usa le media query per creare un sito web reattivo:
Esempio
Le media query possono essere utilizzate anche per modificare il layout di una pagina in base all'orientamento del browser. Puoi avere un insieme di proprietà CSS che si applicheranno solo quando la finestra del browser è più larga della sua altezza, un cosiddetto orientamento "Orizzontale".
Utilizzare un colore di sfondo azzurro se l'orientamento è in modalità orizzontale:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Esempio
Utilizzare mediaquery per impostare il colore del testo su verde quando il documento viene visualizzato sullo schermo e su nero quando viene stampato:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Esempio
Elenco separato da virgole : aggiungi una query multimediale aggiuntiva a una già esistente, utilizzando una virgola (questo si comporterà come un operatore OR):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@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;
}
}
Pagine correlate
Esercitazione CSS: query multimediali CSS
Esercitazione CSS: esempi di query multimediali CSS
Tutorial RWD: web design reattivo con media query
Esercitazione JavaScript: il metodo window.matchMedia()