Come nascondere gli elementi usando le query multimediali

Le query multimediali CSS sono indicate come quelle domande che consentono di modificare l'aspetto di un sito Web in base al dispositivo su cui viene visualizzato. Queste domande utilizzano la regola CSS @Media e richiedono di definire un tipo di media e alcune funzionalità dei media sotto forma di espressioni logiche. Ci sono molte cose che puoi fare sul tuo sito Web reattivo usando query multimediali, tuttavia, in questo articolo, discuteremo di come puoi nascondere i tuoi elementi usando queste domande.

Cominciamo.

Come nascondere gli elementi usando le query multimediali

Come già accennato, le query multimediali ti aiutano a progettare pagine Web reattive. Questi siti Web reattivi richiedono di avere una determinata dimensione dello schermo per avere accesso completo a determinate funzionalità. Qui dimostreremo come nascondere gli elementi usando le query multimediali, ma prima comprendiamo la sintassi di queste domande.

Sintassi

Schermo @Media e (larghezza min: 480px) e (larghezza massima: 720px)

//Codice;

Una query inizia sempre con la regola @media e richiede di specificare il tipo di media su cui deve essere applicata la query. Ad esempio, abbiamo utilizzato il tipo di media sullo schermo qui nella sintassi sopra. Successivamente, alcuni operatori come "e" vengono utilizzati per combinare funzionalità dei media come la larghezza minima o la larghezza massima.

Ora che abbiamo una buona comprensione della sintassi della query multimediale, impariamo a nascondere elementi usando queste domande con l'aiuto di un esempio.

Html

Questo sarà visibile se la larghezza della schermata massima è 700px o più ampia.
Questo sarà visibile se la larghezza della schermata massima è 300px o più ampia.
Questo sarà visibile se la larghezza della schermata massima è 200px o più ampia.

Qui abbiamo creato tre elementi Div e assegnato una classe diversa a ciascuno di essi per dimostrare come nascondere gli elementi sulla base di diverse dimensioni dello schermo.

CSS

div.Container
Background-color: Rosybrown;
larghezza: 200px;
Altezza: 100px;
imbottitura: 15px;
Margine: 5px;
display: blocco inline;

Nel codice sopra, stiamo acconciando tutti e tre gli elementi Div tutti in una volta usando la classe del contenitore. Gli elementi hanno ricevuto un certo colore di sfondo, larghezza, altezza, imbottitura e margine. Inoltre, stiamo visualizzando questi elementi come blocco in linea perché in seguito quando si utilizzano le query multimediali il loro display non deve essere impostato su nessuno per nasconderli.

CSS

@media screen e (massimo-larghezza: 700px)
div.grande
visualizzazione: nessuno;

Nella query sopra stiamo specificando che i dispositivi che hanno una larghezza massima fino a 700px, il div con il nome di classe "grande" si nasconderà poiché il display non è stato impostato su nessuno. Tuttavia, se la larghezza dello schermo è 700px o più larga, gli elementi saranno visibili.

CSS

@media screen e (massimo-larghezza: 300px)
div.medio
visualizzazione: nessuno;

Nel frattempo, questa query afferma per mostrare il contenitore Div con il nome di classe "Medium" solo quando la larghezza dello schermo è 300px o più larga, altrimenti sarà nascosta.

CSS

@media screen e (max-width: 200px)
div.piccolo
visualizzazione: nessuno;

E infine, la query sopra specifica per mostrare il contenitore Div nella condizione quando la larghezza dello schermo è 200px o più ampia, altrimenti, la query multimediale nasconderà il

Produzione

Quando la dimensione dello schermo è di 700px o più.

Quando la dimensione dello schermo è compresa tra 300 px a 700px.

E quando la larghezza dello schermo è compresa tra 200 px a 300px.

Gli elementi sono stati nascosti con successo usando le query multimediali.

Conclusione

Ai fini di nascondere elementi con le query multimediali è semplicemente necessario impostare il loro display in nessuno all'interno della specifica query multimediale. Le query multimediali si rivelano di essere di grande utilità quando si progettano siti Web reattivi, pertanto è possibile utilizzarli per rendere accessibili i tuoi elementi a seconda delle dimensioni dello schermo del dispositivo. Qui in questo post, abbiamo dimostrato con l'aiuto di un esempio come puoi nascondere i tuoi elementi usando le query multimediali.