Was sind Medienabfragen in CSS? Wie benutzt man?

In diesem Artikel wird erläutert, was eine Medienabfrage ist. Wie benutzt man? Lassen Sie alle wissen, wie man Medienabfragen verwendet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was ist eine Medienabfrage? Was ist der Nutzen?

Medienabfragen schränken den Umfang von CSS-Stilen ein, sodass sie nur angewendet werden, wenn bestimmte Medienbedingungen erfüllt sind.

Um es einfach auszudrücken: Mit Medienabfragen können wir CSS-Stile für die Geräteanzeige basierend auf ihren Eigenschaften festlegen (z. B. Breite des Ansichtsfensters, Bildschirmverhältnis, Geräteausrichtung: Quer- oder Hochformat).

Medienabfragen können verwendet werden, um Medieneigenschaften wie Breite, Höhe und Farbe (usw.) zu erkennen. Mithilfe von Medienabfragen können Sie den Anzeigeeffekt für bestimmte Ausgabegeräte anpassen, ohne den Seiteninhalt zu ändern. [Empfohlene verwandte Video-Tutorials: CSS3-Tutorial]

Wie verwende ich Medienabfragen?

Wir können Medienabfragen als if-else-Anweisungen für Browser erklären. Medienabfragen sind logische Ausdrücke, die als wahr oder falsch ausgewertet werden. Eine Medienabfrage besteht aus einem optionalen Medientyp, null oder mehr Medienattributen und logischen Schlüsselwörtern, die die Erstellung komplexerer Ausdrücke ermöglichen.

1. Grundlegende Grammatik:

@media [not | only] <media-type> [and] (<media-condition>);

Anleitung:

Medientyp

Medientypen sind breite Kategorien von Benutzeragentengeräten, die HTML-Dokumente anzeigen können. Die Liste der Medientypen wurde in der Spezifikation „Media Query Level 4“ überarbeitet. Veraltete Medientypen werden als gültig erkannt, aber keinem Gerät zugeordnet, d. h. Ihre Medienabfrage gilt weiterhin, jedoch auf allen Geräten, als ob kein Medientyp angegeben wäre.

Sie können die folgenden Medientypen festlegen:

alle: passt auf alle Geräte.

Drucken: Entspricht dem Drucker und dem Gerät, das zur Wiedergabe der Druckanzeige verwendet wird, z. B. einem Webbrowser, der das Dokument in der Vorschau anzeigt.

Bildschirm: Entspricht allen Geräten, die nicht mit Druck oder Sprache übereinstimmen.

Sprache: Passt zu Bildschirmlesegeräten und ähnlichen Geräten, die Seiten „lesen“.

Medienbedingung

Eine Medienbedingung ist detaillierter als ein Medientyp, da sie eine einzelne spezifische Funktion für das Gerät festlegt Frage. Die Syntax für Medienfunktionen ist dieselbe wie für CSS-Eigenschaften, einschließlich des Funktionsnamens, des Doppelpunkts und des zu testenden Werts.

Die Liste der Medienfunktionen wurde ebenfalls von Medienabfrageebene 3 auf Medienabfrageebene 4 geändert; veraltete Funktionen wurden aus Gründen der Abwärtskompatibilität in der Spezifikation beibehalten, es wird jedoch betont, dass sie nicht in neuen verwendet werden dürfen Stylesheets. Benutzeragenten werden sie weiterhin wie angegeben unterstützen.

Sie können die folgenden Medienfunktionen einstellen:

Bildschirm-/Gerätegröße:
Breite
Höhe
        Seitenverhältnis
Ausrichtung

Anzeigequalität:
Auflösung
Scannen
Gitter
Aktualisieren
Überlaufblock
Überlauf-inline

Farbe:
Farbe
Farbindex
monochrom
Farbskala

Interaktion:
Zeiger
       schweben
Any-Pointer und Any-Hover

Skript:
Skripterstellung:

2. Beispiele für die Verwendung von Medienabfragen:

Implementieren von CSS-responsiven Medienabfragen

Beispiel:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

Erklärung:

Die Bedeutung dieser Medienabfrage ist: Wenn die Bildschirmbreite des Geräts zwischen 320px~~720px liegt, erfolgt die Medienabfrage Das Festlegen der Hintergrundfarbe des Körpers (Hintergrundfarbe: Rot;) überlappt die Hintergrundfarbe des vorherigen Körpers. Wenn die Bildschirmbreite des Geräts unter 320 Pixel liegt, kann die Medienabfrage die Hintergrundfarbe des Körpers festlegen (Hintergrundfarbe: Blau; ), das Gleiche gilt für die Hintergrundfarbe des Körpers vor der Überlappung.

Von CSS @media abgefragte Browser unterstützen die Methode

zum Anwenden von Stilen basierend auf Medieninformationen, einschließlich Seiten- und Gerätegrößen.

kann die folgenden Versionen unterstützen:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies möglich ist nützlich für alle, die beim Lernen geholfen haben.

Das obige ist der detaillierte Inhalt vonWas sind Medienabfragen in CSS? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!