So verbergen Sie Elemente mit Medienfragen

CSS -Medienabfragen werden als solche Abfragen bezeichnet, mit denen Sie das Erscheinungsbild einer Website gemäß dem Gerät ändern können, auf dem sie angezeigt werden. Diese Abfragen verwenden die CSS @Media -Regel und verlangen, dass Sie einen Medientyp und bestimmte Medienfunktionen in Form von logischen Ausdrücken definieren. Es gibt viele Dinge, die Sie mit Ihrer reaktionsschnellen Website mit Medienabfragen tun können. In diesem Artikel werden wir jedoch besprechen, wie Sie Ihre Elemente mit diesen Abfragen verbergen können.

Lass uns anfangen.

So verbergen Sie Elemente mit Medienfragen

Wie bereits erwähnt, helfen Ihnen Medienabfragen, reaktionsschnelle Webseiten zu entwerfen. Diese reaktionsschnellen Websites erfordern, dass Sie eine bestimmte Bildschirmgröße haben, um einen vollständigen Zugriff auf bestimmte Funktionen zu erhalten. Hier zeigen wir, wie Sie Elemente mit Medienabfragen verbergen können, aber davor verstehen wir zunächst die Syntax dieser Abfragen.

Syntax

@media Screen und (Min-Width: 480px) und (max-Width: 720px)

//Code;

Eine Abfrage beginnt immer mit der @media -Regel und verlangt von Ihnen, den Medietyp anzugeben, auf den die Abfrage angewendet werden soll. Zum Beispiel haben wir hier den Bildschirmmedientyp hier in der obigen Syntax verwendet. Danach werden bestimmte Betreiber wie "und" verwendet, um Medienmerkmale wie Minwidth oder Max-Breite zu kombinieren.

Nachdem wir nun ein gutes Verständnis für die Medienanfragesyntax haben, lernen wir, dass Elemente mit Hilfe eines Beispiels mithilfe dieser Abfragen ausgeblendet werden.

Html

Dies ist sichtbar, wenn die maximale Bildschirmbreite 700px oder breiter ist.
Dies ist sichtbar, wenn die maximale Bildschirmbreite 300px oder breiter ist.
Dies ist sichtbar, wenn die maximale Bildschirmbreite 200px oder breiter ist.

Hier haben wir drei DIV -Elemente erstellt und jedem von ihnen eine andere Klasse zugewiesen, um zu demonstrieren, wie Elemente auf der Grundlage verschiedener Bildschirmgrößen verbergen werden können.

CSS

div.Container
Hintergrundfarbe: Rosybrown;
Breite: 200px;
Höhe: 100px;
Polsterung: 15px;
Rand: 5px;
Anzeige: Inline-Block;

Im obigen Code stylen wir alle drei DIV -Elemente auf einmal mit der Containerklasse. Die Elemente erhielten Hintergrundfarbe, Breite, Höhe, Polsterung und Marge. Darüber hinaus zeigen wir diese Elemente als Inline-Block an.

CSS

@media Bildschirm und (max-Width: 700px)
div.groß
Anzeige: Keine;

In der obigen Abfrage geben wir an, dass die Geräte mit einer maximalen Breite von bis zu 700 PX, der Div mit dem Klassennamen „groß“, sich verbergen wird, wenn das Display auf keine festgelegt wurde. Wenn die Bildschirmbreite jedoch 700px oder breiter beträgt, sind die Elemente sichtbar.

CSS

@media Bildschirm und (max-Width: 300px)
div.Mittel
Anzeige: Keine;

In der Zwischenzeit zeigt diese Abfrage den Div -Container mit dem Klassennamen „Medium“ nur dann, wenn die Breite des Bildschirms 300px oder breiter ist, andernfalls wird er versteckt sein.

CSS

@media Bildschirm und (max-Width: 200px)
div.klein
Anzeige: Keine;

Und schließlich gibt die obige Abfrage an, den Div -Container in der Bedingung anzuzeigen, wenn die Bildschirmbreite 200px oder breiter ist. Andernfalls verbergt die Medienabfrage die

Ausgang

Wenn die Bildschirmgröße 700px oder größer ist.

Wenn die Bildschirmgröße zwischen 300px und 700 PX liegt.

Und wenn die Bildschirmbreite zwischen 200px und 300px liegt.

Die Elemente wurden mit Medienfragen erfolgreich versteckt.

Abschluss

Zum Zwecke des Versteckens von Elementen mit Medienfragen müssen Sie ihre Anzeige einfach in der spezifischen Medienabfrage auf keine festlegen. Medienabfragen erweisen sich bei der Gestaltung reaktionsschneller Websites als groß. Hier in diesem Beitrag haben wir mit Hilfe eines Beispiels demonstriert, wie Sie Ihre Elemente mit Medienabfragen verbergen können.