Bei der Gestaltung einer reaktionsschnellen Website möchte der Webentwickler die Struktur des Weblayouts basierend auf dem Gerät verwenden. Mit CSS können seine Benutzer diese Aufgabe durch die @media -Regel ausführen, die Medienabfragen verwendet, um das Erscheinungsbild einer Website zu ändern, die dem Gerätetyp entspricht. Um zu verstehen, was diese Regel ist, lesen Sie den folgenden Beitrag. Die im Posten hervorgehobenen Probanden sind wie folgt.

1. @media regel
2. Syntax der @media -Regel
3. Arten von CSS -Medien
4. Arten von Medienfunktionen

@media regel

Zum Zweck der Änderung des Erscheinungsbilds einer Webseite basierend auf dem Gerät oder Medien, die es anzeigen, wird die @media -Regel verwendet. Diese Regel nutzt die Medienfragen, um die oben genannte Aufgabe auszuführen. Diese Regel ist bei der Entwicklung einer reaktionsschnellen Website von großer Nutzung von großer Nutzung.

Syntax der @media -Regel

Es hat die folgende Syntax.

Schlüsselwörter erklärt

nicht: Es kehrt die Semantik einer Medienabfrage um.

nur: Es verhindert, dass die alten Versionen eines Browsers die Medienabfrage implementieren.

Und: Es kombiniert einen Medientyp mit einer bestimmten Medienfunktion.

Typen CSS -Medien

Es gibt insgesamt vier Medientypen, die wir unten bereitgestellt haben.

alle

Es gilt für alle Arten von Mediengeräten.

drucken

Diese Abfrage wird speziell für Drucker verwendet.

Bildschirm

Es wird für Bildschirme verschiedener Gerätetypen wie Computer, Laptops, Mobiltelefone usw. verwendet.

Rede

Diese Abfrage wird besonders für Bildschirmleser verwendet.

Arten von Medienfunktionen

Wir haben hier einige Medienfunktionen beschrieben.

1. Any-Hoover

Diese Funktion wurde in Medienabfragen Level 4 enthalten und gibt an, dass der Benutzer, falls ein bestimmter Eingabemechanismus, über die Elemente schweben lässt.

Jeder-Zeiger

Dies wurde auch in Medienabfragen Level 4 enthalten und besagt, dass, wenn ein bestimmter Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie genau ist es?

Seitenverhältnis

Diese Funktion definiert das Verhältnis der Ansichtsfensterbreite und ihrer Höhe.

Farbe

Diese Funktion gibt die Komponenten der Farben der Ausgangsgeräte an.

Farbgamut

Dies definiert den Farbbereich, der von Ausgabegeräten unterstützt wird.

Farbindex

Es gibt an, wie viele Farben ein bestimmtes Gerät angezeigt werden kann.

Netz

Die Größe der Spalten und Zeilen wird durch die Gitterfunktion angegeben.

Höhe

Dies definiert die Höhe des Ansichtsfensters.

schweben

Damit Benutzer über HTML -Elemente schweben können, wird die Hover -Funktion verwendet.

invertierte Farben

Dies gibt an, ob das Ausgabegerät die Farben invertiert oder nicht.

Lichtstufe

Wie der Name schon sagt, definiert es das Lichtniveau.

Max-Aspespatio

Das maximale Verhältnis von Breite und Höhe wird durch diese Funktion angegeben.

Max-Farbe

Die meiste Anzahl von Bits pro Farbeinheiten der Ausgabegeräte wird durch diese Funktion angegeben.

Max-Color-Index

Diese Funktion besagt die maximalen Farben, die ein Gerät angezeigt werden kann.

maximale Höhe

Diese Funktion definiert die maximale Höhe des Browsers.

Max-Monochrom

Die meiste Anzahl von Bits pro Farbeinheiten eines monochromen Werkzeugs wird in dieser Funktion angegeben.

Min-Auflösung

Die minimale Auflösung des Ausgabegeräts wird durch die MIN-Auflösungsfunktion angegeben.

Minweite

Diese Funktion definiert die minimale Breite des Browsers.

einfarbig

Diese Funktion gibt die maximale Anzahl von Bits pro Farbkomponente eines Monochromgeräts an.

Orientierung

Es definiert, ob die Ausrichtung des Aussichtsfenpfers Porträt oder Landschaft ist.

Überlaufblock

Es übernimmt die Szenarien, in denen der Inhalt der Webseite das Ansichtsfenster überläuft.

Überlaufinline

Es behandelt die Szenarien, in denen der Inhalt der Webseite das Ansichtsfenster über die Inline -Achse überläuft.

Zeiger

Ein grundlegender Eingabemechanismus zum Zeigen von Geräten.

Auflösung

Es gibt die Auflösung des Geräts an (in DPI oder DPCM)

Scan

Es scannt die Ausgabegeräte.

Scripting

Es prüft, ob Skripten wie JavaScript verfügbar sind oder nicht.

aktualisieren

Es aktualisiert die Ausgabegeräte schnell.

Breite

Die Ansichtsfensterbreite wird durch diese Funktion definiert.

Im Folgenden haben wir Ihnen ein Beispiel vorgestellt, damit Sie die @media -Regel besser verstehen können.

Beispiel

Das folgende Beispiel zeigt die @media -Regel.

Html

CSS @Media Rule

Zum Zweck der Änderung des Erscheinungsbilds einer Webseite basierend auf dem Gerät oder Medien, die es anzeigen, wird die @media -Regel verwendet. Diese Regel nutzt die Medienfragen, um die oben genannte Aufgabe auszuführen. Diese Regel ist bei der Entwicklung einer reaktionsschnellen Website von großer Nutzung von großer Nutzung.

Hier haben wir zwei Elemente definiert, die sind

Und

. Wir werden einige Medienregeln auf diese Elemente anwenden.

CSS

H1, p
Schriftfamilie: 'Times New Roman', Times, Serif;
Schriftgröße: 16px;
Schriftstil: normal;

@media Bildschirm und (Min-Width: 720px)
P
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
Schriftgröße: 25px;
Schriftstil: kursiv;

Im obigen Code haben wir festgelegt, dass sowohl die Überschrift als auch der Absatz Verdana -Schriftfamilie, eine Schriftgröße von 25px und einen kursiven Schriftstil haben, wenn die minimale Bildschirmbreite des Geräts 720px oder breiter ist. Wenn die Bildschirmbreite jedoch weniger als 720px beträgt, ist die Schriftfamilie zeitweise neu, Schriftgröße 16px und Schriftstil normal.

Ausgang

Wenn die Bildschirmbreite 720px oder breiter ist.

Wenn die Bildschirmbreite weniger als 720px beträgt.

Die @media -Regel wurde erfolgreich umgesetzt.

Abschluss

Die @media -Regel wird verwendet, um das Erscheinungsbild einer Webseite basierend auf dem Gerät oder Medien zu ändern, die sie anzeigen. Die Syntax der Regel besagt, dass der Medientyp zusammen mit bestimmten Medienfunktionen definiert werden sollte und einige Betreiber nutzen sollte. Darüber hinaus gibt es vier Typen; Alle, Bildschirm, Druck und Sprache. Darüber hinaus gibt es viele Medienfunktionen wie Breite, Monochrom, Größe, Überlaufblock usw. Dieser Beitrag erklärt die @media -Regel zutiefst zusammen mit ihren Syntax-, Medientypen und Medienfunktionen.