Hvordan skjule elementer ved hjelp av medier

CSS Media -spørsmål blir referert til som de spørsmålene som lar deg endre utseendet til et nettsted i henhold til enheten det vises på. Disse spørsmålene benytter seg av CSS @media -regelen og krever at du definerer en medietype og visse mediefunksjoner i form av logiske uttrykk. Det er mange ting du kan gjøre med det responsive nettstedet ditt ved hjelp av medier.

La oss begynne.

Hvordan skjule elementer ved hjelp av medier

Som allerede nevnt, hjelper medias spørsmål deg med å designe responsive websider. Disse responsive nettstedene krever at du har en viss skjermstørrelse for å ha full tilgang til visse funksjoner. Her skal vi demonstrere hvordan du kan skjule elementer ved hjelp av mediespørsmål, men før det la oss først forstå syntaks for disse spørsmålene.

Syntaks

@Media-skjerm og (min bredde: 480px) og (maks bredde: 720px)

//Kode;

En spørring begynner alltid med @media -regelen og krever at du spesifiserer medietypen som spørringen skal brukes. For eksempel har vi brukt skjermtypen her i syntaks ovenfor. Etterpå brukes visse operatører som 'og' til å kombinere mediefunksjoner som min bredde, eller maks bredde.

Nå som vi har en god forståelse av syntaksen.

Html

Dette vil være synlig hvis maks skjermbredde er 700px eller bredere.
Dette vil være synlig hvis maks skjermbredde er 300px eller bredere.
Dette vil være synlig hvis maks skjermbredde er 200px eller bredere.

Her har vi laget tre divelementer og tildelt en annen klasse enn hver enkelt for å demonstrere hvordan du kan skjule elementer på grunnlag av forskjellige skjermstørrelser.

CSS

div.container
Bakgrunnsfarge: Rosybrown;
Bredde: 200px;
Høyde: 100px;
polstring: 15px;
Margin: 5px;
Display: Inline-block;

I koden ovenfor styles vi alle de tre divelementene på en gang ved hjelp av containerklassen. Elementene fikk litt bakgrunnsfarge, bredde, høyde, polstring og margin. Dessuten viser vi disse elementene som inline-blokkering fordi senere når du bruker medier-spørsmål, må visningen deres settes til ingen for å skjule dem.

CSS

@Media-skjerm og (maks bredde: 700px)
div.stor
Display: Ingen;

I spørringen ovenfor spesifiserer vi at enhetene som har maksimal bredde opp til 700px, vil DIV med klassenavnet “Large” skjule ettersom skjermen er satt til ingen. Imidlertid, hvis skjermbredden er 700px eller bredere, vil elementene imidlertid være synlige.

CSS

@Media-skjerm og (maks bredde: 300px)
div.medium
Display: Ingen;

I mellomtiden sier denne spørringen å vise DIV -beholderen med klassenavnet "Medium" bare når bredden på skjermen er 300px eller bredere, ellers vil den være skjult.

CSS

@Media-skjerm og (maks bredde: 200px)
div.liten
Display: Ingen;

Og til slutt spesifiserer spørringen over for å vise DIV -beholderen i tilstanden når skjermbredden er 200px eller bredere, ellers vil medie -spørringen skjule

Produksjon

Når skjermstørrelsen er 700px eller større.

Når skjermstørrelsen er mellom 300px til 700px.

Og når skjermbredden er mellom 200px til 300px.

Elementene ble skjult med hell ved å bruke medier.

Konklusjon

For å skjule elementer med medieforespørsler må du ganske enkelt angi displayet til ingen i den spesifikke medieforespørselen. Media -spørsmål viser seg å være til stor nytte når du designer responsive nettsteder, derfor kan du bruke dem for å gjøre elementene dine tilgjengelige avhengig av skjermstørrelsen på enheten. Her i dette innlegget har vi demonstrert ved hjelp av et eksempel på hvordan du kan skjule elementene dine ved hjelp av mediespørsmål.