Rileva le dimensioni del browser con CSS3

Quando iniziamo esattamente nel mondo di design reattivo è importante sapere quali sono le nuove regole di CSS3, questo ci aiuta a rilevare le dimensioni dello schermo su cui viene visualizzato il sito Web o l'applicazione.
Una di queste regole è @metà, che con l'opportuna combinazione di condizioni ci consente di conoscere la dimensione dello schermo in quanto tale e, a seconda del risultato, intraprendere le azioni pertinenti riguardo al suo design.

Utilizzo delle query multimediali

Creiamo un codice HTML semplice e lì includeremo il nostro foglio di stile, che conterrà le regole per il nostro significa volere, vediamo:

 Rileva le dimensioni dello schermo 

Come possiamo vedere, è un codice abbastanza semplice, tuttavia ci sono diverse cose da evidenziare. Il primo è racchiuso nelle etichette stile, abbiamo due regole, la prima indica che da 600 pixel il colore di sfondo del nostro testo sull'etichetta h1 Diventerà blu, vediamo quando ridimensioneremo nel browser e questa modifica avrà effetto:

La seconda regola indica che se la larghezza massima è 400 pixel il colore di sfondo del testo cambierà in rosso, che indica una terza condizione, poiché tutto sotto i 400 pixel sarà rosso e sopra i 600 sarà blu, quindi da 401 a 599 pixel manterrà il colore bianco per impostazione predefinita, vediamo:

Infine, se diminuiamo molto di più lo schermo del nostro browser, inseriremo la regola per il nostro colore di sfondo rosso, vediamo come appare:

Vediamo quindi che rilevare le dimensioni del nostro browser è un compito estremamente semplice grazie a CSS3, qualcosa che è estremamente utile quando lavoriamo con design reattivi e abbiamo bisogno di conoscere le dimensioni del browser dell'utente per applicare stili che rendano il nostro sito web bello su qualsiasi dispositivo e risoluzione dello schermo esistente.