Come si scrive una query multimediale CSS?

Conoscere la sintassi per le query multimediali di larghezza minima e larghezza massima

Web design reattivo è un approccio alla creazione di pagine Web in cui tali pagine possono modificare dinamicamente il layout e l'aspetto in base alle dimensioni dello schermo di un visitatore . Gli schermi di grandi dimensioni ricevono un layout adatto a quei display più grandi mentre i dispositivi più piccoli, come i telefoni cellulari, ricevono lo stesso sito Web formattato in modo adatto a quello schermo più piccolo. Questo approccio offre una migliore esperienza utente per tutti gli utenti e può anche aiutare migliorare il posizionamento sui motori di ricerca . Query sui media CSS costituiscono una parte importante del responsive web design.

Le Media Query sono come piccole istruzioni condizionali all'interno del file CSS del tuo sito Web, che ti consentono di impostare determinate regole CSS che avranno effetto solo una volta soddisfatta una determinata condizione, ad esempio quando una dimensione dello schermo è superiore o inferiore a determinate soglie.

Le query multimediali sono ora standard, ma le versioni molto vecchie di Internet Explorer non le supportano.

Query sui media in azione

Inizia con un ben strutturatodocumento HTMLprivo di stili visivi.

Nel tuo file CSS, modella la pagina e imposta una linea di base per l'aspetto del sito web. Per rendere la dimensione del carattere della pagina a 16 pixel, scrivi questo CSS :

|_+_|

Aggiunta di più media query

Inoltre, puoi aggiungere più Media Query per ogni dimensione più grande, inserendole nel tuo foglio di stile in questo modo:

|_+_|

Le prime Media Query arrivano a 1000 pixel di larghezza, modificando la dimensione del carattere a 20 pixel. Quindi, una volta che il browser supera i 1400 pixel, la dimensione del carattere cambia nuovamente a 24 pixel. Aggiungi tutte le Media Query necessarie per il tuo particolare sito web.

Larghezza minima e larghezza massima

Esistono generalmente due modi per scrivere Media Query: utilizzando larghezza minima o con larghezza massima . Finora, abbiamo visto la larghezza minima in azione. Questo approccio attiva le Media Query dopo che un browser ha raggiunto almeno quella larghezza minima. Quindi una query che utilizza larghezza minima: 1000 px si applica quando il browser ha una larghezza di almeno 1000 pixel. Questo stile di Media Query viene utilizzato quando crei un sito in modalità mobile-first.

Se usi larghezza massima , funziona in modo opposto. Una query multimediale di 'larghezza massima: 1000px' viene applicata dopo che il browser è sceso al di sotto di questa dimensione.