CSS Esempio di base

Esempio

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

La query multimediale precedente specifica due condizioni:

  1. La pagina deve essere visualizzata su uno schermo normale (non una pagina stampata, un proiettore, ecc.).
  2. La larghezza della porta di visualizzazione dell'utente deve essere di almeno 720 pixel.

Se queste condizioni sono soddisfatte, gli stili all'interno della query multimediale saranno attivi e il colore di sfondo della pagina sarà blu cielo.

Le query multimediali vengono applicate in modo dinamico. Se sulla pagina di caricamento vengono soddisfatte le condizioni specificate nella query multimediale, il CSS verrà applicato, ma verrà immediatamente disabilitato nel caso in cui le condizioni cessino di essere soddisfatte. Al contrario, se le condizioni inizialmente non sono soddisfatte, il CSS non sarà applicato fino a quando non saranno soddisfatte le condizioni specificate.

Nel nostro esempio, se la larghezza della porta di visualizzazione dell'utente è inizialmente maggiore di 720 pixel, ma l'utente riduce la larghezza del browser, il colore di sfondo cesserà di essere blu cielo non appena l'utente ha ridimensionato la porta di visualizzazione a meno di 720 pixel in larghezza.