Was ist der Unterschied zwischen Bildschirm und nur Bildschirm in Medienabfragen?
In diesem Beitrag wird erklärt, was "Bildschirm" von "einzeln.
Was "Bildschirm" von "Nur Bildschirm" in Medienabfragen unterscheidet?
“Bildschirm”Wird verwendet, um die Größe des Bildschirms in der Medienabfrage festzulegen. Insbesondere kann die Bildschirmgröße mit “eingestellt werden“maximale Breite" Und "Minweite”CSS -Eigenschaften. Die Größe des Bildschirms unterscheidet sich von Bildschirm zu Bildschirm. Daher wird das Schlüsselwort „nur“ bestimmt, um frühere Browser daran zu hindern, die bereitgestellten Stile zu verwenden.
So nutzen Sie die Medienabfragen "Bildschirm"?
Um das zu nutzenBildschirm”Schauen Sie sich in einer Medienabfrage die aufgeführten Anweisungen an.
Schritt 1: Setzen Sie eine Überschrift ein
Verwenden Sie zunächst das HTML -Überschriften -Tag, um eine Überschrift in das HTML -Dokument hinzuzufügen. Zum Beispiel die “ Schritt 2: Text in Absatz hinzufügen Fügen Sie als nächstes Text mit Hilfe des "Text in den Absatz hinzu @Media regel anwenden Wir haben die Breite des Bildschirms festgelegt. Ausgang Schritt 3: Styling auf "Körper" -Element auftragen Greifen Sie auf das Körperelement zu und wenden Sie die CSS -Eigenschaften zum Styling an: Um dies zu tun, die “HintergrundfarbeDie Eigenschaft wird verwendet, um eine Farbe am Hintern des Elements zuzuweisen. Schritt 4: Setzen Sie "@Media Bildschirm" Nach unseren Anforderungen haben wir die Breite eines Dokuments festgelegt “auf“300”Pixel oder weniger. Die Hintergrundfarbe ist "Lightskyblues”. Wenn nicht, wird es sein "Grün”. Um dies zu tun, nutzen Sie die “@media Bildschirm”Und setzen Sie die maximale Breite des Bildschirms. Greifen Sie danach auf den Körper zu und wenden Sie die folgenden CSS -Eigenschaften an: Hier: Ausgang So nutzen Sie die Medienfragen "Nur Bildschirm"? Der "nurDas Keyword beschränkt die Browser daran, die angegebenen Stile anzuwenden, die nicht von Medienabfragen mit Medienfunktionen unterstützt werden. Befolgen Sie die Anweisungen, um die zu verwendenNur Bildschirm”In Medienfragen. Schritt 1: Stil „Körper“ Zugriff auf den Körper und wenden Sie die “anHintergrundfarbe”Um die Farbe auf der Rückseite des Elements auf dem Bildschirm anzugeben. Schritt 2: Verwenden Sie die Medienabfrage mit "Nur Bildschirm" Wenden Sie nun eine Medienanfrage mit “an“ an “Nur Bildschirm”Um die Breite des Bildschirms festzulegen. Dafür der Wert der “Nur Bildschirm"Eigenschaft wird als" festgelegt "400px”. Schritt 3: Setzen Sie die Eigenschaft „Hintergrundfarbe“ Wenn wir die Breite eines Dokuments auf “gesetzt haben“400"Pixel oder weniger, die Hintergrundfarbe ist"RGB (17, 97, 202)”. Ansonsten ist es "RGB (235, 185, 23)”. Ausgang Hier geht es um die Unterscheidung zwischen den Bildschirm "Medienabfragen. Abschluss Die Unterscheidung zwischen "Nur Bildschirm" Und "Bildschirm"In Medienfragen ist das" das "Bildschirm”Wird verwendet, um die Bildschirmgröße der Medienabfrage anzuzeigen. Der "maximale Breite" Und "Minweite”Kann verwendet werden, um die Bildschirmgröße zu steuern. Da jeder Bildschirm eine eindeutige Bildschirmgröße hat, ist die “nurDas Schlüsselwort wird verwendet, um die Implementierung der angegebenen Stile in früheren Browsern zu vermeiden, die keine Medienabfragen zulassen. Dieser Beitrag hat die Unterscheidung zwischen "nur Bildschirm" und "Bildschirm" in Medienabfragen erklärt.
Hintergrundfarbe: Grün;
Körper
Hintergrundfarbe: Lightsskyblues;
Farbe: RGB (226, 12, 12);
Greifen Sie wieder auf den Körper zu und tragen Sie an “Hintergrundfarbe" nochmal:
Hintergrundfarbe: RGB (235, 185, 23);
@media nur Bildschirm und (max-Width: 400px)
Körper
Hintergrundfarbe: RGB (17, 97, 202);