Come si scrive una query multimediale CSS?

schermo @media e (larghezza minima: 1000px) { }

Questa è la sintassi di una Media Query. Si inizia con @media per stabilire la Media Query stessa. Quindi, imposta il tipo di supporto, che in questo caso è schermo. Questo tipo si applica a schermi di computer desktop, tablet, telefoni, ecc. Termina la query multimediale con il funzione multimediale. Nel nostro esempio sopra, cioè larghezza media: 1000 px. Ciò significa che Media Query si attiva per i display con una larghezza minima di 1000 pixel di larghezza.

Dopo questi elementi della Media Query, aggiungi una parentesi graffa di apertura e chiusura simile a quella che faresti in una normale regola CSS.

Il passaggio finale a una query multimediale consiste nell'aggiungere le regole CSS da applicare dopo che questa condizione è stata soddisfatta. Inserisci queste regole CSS tra le parentesi graffe che compongono la Media Query, in questo modo:

 @media screen e (min-width: 1000px) { body { font-size: 20px; }

Quando le condizioni della Media Query sono soddisfatte (la finestra del browser è larga almeno 1000 pixel), questo stile CSS ha effetto, modificando la dimensione del carattere del nostro sito dai 16 pixel che abbiamo stabilito originariamente al nostro nuovo valore di 20 pixel. 
 Aggiunta di più stili 

Posto come molti Regole CSS all'interno di questa Media Query secondo necessità per regolare l'aspetto visivo del tuo sito web. Ad esempio, per non solo aumentare la dimensione del carattere a 20 pixel, ma anche cambiare il colore di tutti i paragrafi in nero (#000000), aggiungi questo: 
@media schermo e (larghezza minima: 1000px) {
corpo {
dimensione del carattere: 20px;
}
p {
colore: #000000;
}
}
 Aggiunta di più media query 

Inoltre, puoi aggiungere più Media Query per tutte le dimensioni più grandi, inserendole nel tuo foglio di stili in questo modo: 
@media schermo e (larghezza minima: 1000px) {
corpo {
dimensione del carattere: 20px;
}
p {
colore: #000000;
{
}
@media schermo e (larghezza minima: 1400px) {
corpo {
dimensione del carattere: 24px;
}
}

Le prime media query iniziano a 1000 pixel di larghezza, cambiando la dimensione del carattere a 20 pixel. Quindi, una volta che il browser ha superato i 1400 pixel, la dimensione del carattere cambia nuovamente a 24 pixel. Aggiungi tutte le query multimediali necessarie per il tuo sito Web specifico. 
 Larghezza minima e Larghezza massima 

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

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

Cita questo articolo.