Le query multimediali nei CSS vengono utilizzate per applicare stili diversi a dispositivi o dimensioni di schermo diverse. In altre parole, consentono di rendere il sito web o l’applicazione responsive.
Ecco come utilizzarle:
1. Aggiungi una query multimediale nel tuo foglio di stile CSS usando la regola @media. La sintassi generale è la seguente:
```
@media media_type and (media_feature) {
/* Inserisci qui i tuoi stili CSS */
}
```
1. Sostituisci ‘media\_type’ con il tipo di dispositivo a cui vuoi applicare gli stili (come ‘screen’ per i dispositivi a schermo, ‘print’ per la stampa, ecc.).
1. Sostituisci ‘media\_feature’ con la funzionalità specifica che vuoi targetizzare (come larghezza massima, risoluzione, orientamento, ecc.).
Ecco un esempio pratico di come utilizzare le query multimediali nei CSS:
```
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
In questo esempio, il colore di sfondo del body cambierà in lightblue quando la larghezza dello schermo è inferiore o uguale a 600px.
Mentre:
```
@media print {
body {
color: black;
}
}
```
In questo esempio quando si stampa la pagina web, il colore del testo sarà nero.
Puoi anche combinare più query multimediali utilizzando le parole chiave ‘and’, ‘not’ e ‘only’.
```
@media screen and (min-width: 600px) and (max-width: 1200px) {
body {
background-color: lightblue;
}
}
```
In questo esempio, il colore di sfondo del body cambierà in lightblue quando la larghezza dello schermo è compresa tra 600px e 1200px.
