Medienfragen in CSS | Erklärt
In diesem Artikel wird eine umfassende Anleitung für die CSS-Medienabfragen vorgestellt und wird wie folgt organisiert:
- Was sind CSS -Medienfragen?
- Grundlegende Syntax
- Warum Medienfragen verwendet werden
- Arten von Medienfragen
- Praktische Implementierung von CSS -Medienabfragen
So lass uns anfangen!
Was sind Medien -CSS -Abfragen?
Mit Medienabfrage können wir je nach Größe des Ansichtsfenfers verschiedene Layouts erstellen. Beispielsweise können Medienabfragen erkennen, ob der Benutzer eine Maus oder einen Touchscreen usw. verwendet usw.
Die folgende Liste enthält verschiedene Dinge, die ein CSS -Medienabfrage überprüft:
- Größe und Breite des Ansichtsfenster.
- Höhe und Breite des Geräts.
- Auflösung.
- Ausrichtung des Geräts i.e. Porträt oder Landschaft.
Alles in allem können wir sagen, dass Medienfragen sehr nützlich sind, um die verschiedenen Aspekte in Bezug auf die Umgebung zu erkennen, in der die Website ausgeführt wird.
Grundlegende Syntax
Die grundlegende Syntax von Medienabfragen besteht aus mehreren Dingen wie Medientyp (i.e. Bildschirm, alle usw.) ein einzelner oder mehrerer Ausdrücke. Die Medienabfrage wird immer mit der "@media" initiiert. Der "Medientyp”Kann miteinander kombiniert werden Ausdruck (en) Mit einem logischen Operator ist dies jedoch optional:
@media mediType und (Ausdruck/Ausdrücke)/ * Code/CSS -Regeln */
Eine Medienabfrage in CSS ist eine logische Operation, daher wird das zugehörige CSS auf das Zielelement angewendet.
Warum Medienfragen verwendet werden
Medienabfragen werden verwendet, um einer Website für verschiedene Geräte wie Laptops, Desktops, Mobiltelefone usw. ein maßgeschneidertes Erscheinungsbild zu bieten. Wir können also sagen, dass Medienabfragen verwendet werden, um neue CSS -Regeln zu erstellen oder die vorhandenen CSS zu überschreiben, um eine reaktionsschnelle Website zu präsentieren.
Arten von Medienfragen
Es gibt vier Arten von CSS -Medienabfragen, die für verschiedene Zwecke verwendet werden können, wie unten aufgeführt:
| Medientyp | Beschreibung |
|---|---|
| alle | Verwendet für alle Medientypen i.e. Bildschirm, Druck, Sprache |
| Bildschirm | Wird für Bildschirme wie Mobiltelefone, Laptops usw. verwendet. |
| Nur für Drucker verwendet. | |
| Rede | Verwendet für den Bildschirm lesen |
Praktische Implementierung von CSS -Medienabfragen
Ab sofort haben wir eine grundlegende Vorstellung davon, was eine Medienabfrage ist, ihre Syntax, warum wir sie verwenden sollten und welche verschiedenen Arten von CSS -Medienabfragen sind. Und jetzt für ein tiefgreifendes Verständnis werden wir diese theoretischen Konzepte in ein praktisches Szenario umsetzen.
Beispiel
In diesem Beispiel werden wir drei Absätze und eine Überschrift erstellen und die Hintergrundfarbe und die Textausrichtung des Körpers festlegen hellgrau Und Center bzw. Darüber hinaus werden wir die Medienabfragen verwenden, um die Hintergrundfarbe und die Textausrichtung zu ändern Himmelblau Und links Dies wird in Aktion kommen, wenn die Bildschirmgröße breiter ist als 360 Pixel:
Medien-Anfragen
Hintergrundfarbe des Körpers ist hellgrau
Die Hintergrundfarbe wird von hellgrau bis himmelblau geändert, wenn das Ansichtsfenster breiter als 360 Pixel ist
Das untergegebene Snippet zeigt die Funktionsweise von CSS-Medienabfragen:
Aus der Ausgabe ist klar, dass die Hintergrundfarbe zunächst hellgrau war und der Text in der Mitte ausgerichtet war, da zu dieser Zeit die Breite des Bildschirms weniger als 360 betrug. Als wir jedoch die Breite des Bildschirms veränderten (mehr als 360), wurden die Hintergrundfarbe und die Textausrichtung an die himmelblaue Farbe und die linke Ausrichtung modifiziert.
Abschluss
Medienabfragen werden verwendet, um die Präsentation der Website gemäß der Bildschirmgröße des Benutzers anzupassen. Mithilfe von Medienabfragen können wir die verschiedenen Markups je nach Typ des Geräts (Mobile, Tablet, Desktop) anzeigen. In CSS sind Medienabfragen eine logische Operation, und daher werden das zugehörige CSS auf das Zielelement angewendet. Dieses Schreiben enthält ein detailliertes Verständnis der CSS-Medienabfragen und bietet für ein besseres Verständnis Code-Snippets sowie die jeweiligen Ausgänge.