Query multimediali in CSS | Spiegato
Questo articolo presenterà una guida completa per le query dei media CSS e sarà organizzata come segue:
- Quali sono le query multimediali CSS?
- Sintassi di base
- Perché vengono utilizzate le query dei media
- Tipi di domande sui media
- Implementazione pratica delle query dei media CSS
Quindi iniziamo!
Cosa sono le query CSS dei media?
La query multimediale ci consente di creare vari layout a seconda delle dimensioni del vista. Ad esempio, le query multimediali possono rilevare se l'utente utilizza un mouse o un touchscreen, ecc.
L'elenco seguente presenta cose diverse che una query multimediale CSS controlla:
- Altezza e larghezza di Viewport.
- Altezza e larghezza del dispositivo.
- Risoluzione.
- Orientamento del dispositivo I.e. ritratto o paesaggio.
Tutto sommato, possiamo dire che le query dei media sono molto utili per rilevare i vari aspetti relativi all'ambiente su cui è in esecuzione il sito.
Sintassi di base
La sintassi di base delle query dei media è costituita da più cose come il tipo di media (i.e. schermo, tutto, ecc.), una singola o più espressioni. La query sui media sarà sempre iniziata con "@media". IL "tipo di supporto"Può essere combinato con espressione (i) Utilizzando un operatore logico, tuttavia, è facoltativo:
@media mediatype e (espressione/espressioni)/ * Codice/Regole CSS */
Una query multimediale in CSS è un'operazione logica quindi ogni volta che diventa vera, il CSS correlato verrà applicato all'elemento target.
Perché vengono utilizzate le query dei media
Le query multimediali vengono utilizzate per fornire un aspetto personalizzato a un sito Web per vari dispositivi come laptop, desktop, telefoni cellulari, ecc. Quindi, possiamo dire che le query dei media sono utilizzate per creare nuove regole CSS o per sovrascrivere il CSS esistente per presentare un sito Web reattivo.
Tipi di domande sui media
Esistono quattro tipi di query multimediali CSS che possono essere utilizzate per scopi diversi come elencati di seguito:
| Tipo di supporto | Descrizione |
|---|---|
| Tutto | Utilizzato per tutti i tipi di media i.e. schermo, stampa, discorso |
| schermo | Utilizzato per schermi come telefoni cellulari, laptop, ecc. |
| stampa | Utilizzato solo per le stampanti. |
| discorso | Utilizzato per la lettura dello schermo |
Implementazione pratica delle query dei media CSS
A partire da ora, abbiamo un'idea di base di cosa sia una query multimediale, la sua sintassi, perché dovremmo usarla e quali sono i diversi tipi di query multimediali CSS. E ora per una profonda comprensione, implementeremo questi concetti teorici in uno scenario pratico.
Esempio
In questo esempio creeremo tre paragrafi e un'intestazione e imposteremo il colore di sfondo del corpo e l'allineamento del testo come grigio chiaro E centro rispettivamente. Inoltre, utilizzeremo le query multimediali per modificare il colore di sfondo e l'allineamento del testo a cielo blu E Sinistra che entrerà in azione quando la dimensione dello schermo sarà più larga o uguale a 360 pixel:
Query dei media
Il colore di sfondo del corpo è grigio chiaro
Il colore di sfondo verrà modificato dal grigio chiaro al blu cielo se il vista è più largo di 360 pixel
Lo snippet di seguito mostrerà il funzionamento delle query multimediali CSS:
Dall'output è chiaro che inizialmente, il colore di sfondo era grigio chiaro e il testo era allineato al centro perché in quel momento la larghezza dello schermo era inferiore a 360. Tuttavia, quando abbiamo cambiato (maggiore di 360) la larghezza dello schermo, il colore di sfondo e l'allineamento del testo sono stati modificati nel colore blu cielo e allineamento a sinistra.
Conclusione
Le query multimediali vengono utilizzate per personalizzare la presentazione del sito Web in base alle dimensioni dello schermo dell'utente. Usando le query multimediali, possiamo mostrare i vari markup a seconda del tipo del dispositivo (mobile, tablet, desktop). In CSS, le query multimediali sono un'operazione logica e quindi ogni volta che diventa vero, il CSS correlato verrà applicato all'elemento target. Questo articolo presenta una comprensione dettagliata delle query multimediali CSS e per una migliore comprensione, fornisce frammenti di codice insieme ai rispettivi output.