Zusammenfassung der Verwendung von CSS3-Medienabfragen

Zunächst müssen wir bei der Verwendung von Medien den folgenden Code einrichten, um mit dem Anzeigeeffekt mobiler Geräte kompatibel zu sein:

Vorbereitung 1: Meta-Tag festlegen

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span style="color: #0000ff;">></span>

Erklärung mehrerer Parameter dieses Codes:

• width = device-width: width ist gleich der Breite des aktuellen Geräts

• initial-scale: Anfängliche Skalierung (Standardeinstellung ist 1,0)

• Minimum-Skalierung: Der minimale Maßstab, auf den der Benutzer zoomen darf (Standardeinstellung ist 1,0)

• maximum-scale: Das maximale Verhältnis, auf das der Benutzer zoomen darf (Standardeinstellung ist 1,0)

• Benutzerskalierbar: Ob der Benutzer manuell zoomen kann (Standard ist „Nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern)

Vorbereitung 2: Kompatible Datei JS laden

Da IE8 weder HTML5 noch CSS3 Media unterstützt, müssen wir zwei JS-Dateien laden, um sicherzustellen, dass unser Code kompatibel ist:

<span style="color: #008000;"><!--</span><span style="color: #008000;">[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]</span><span style="color: #008000;">--></span>

Vorbereitung 3: Stellen Sie den standardmäßigen IE-Renderingmodus auf den höchsten Wert ein (Sie können wählen, ob Sie diesen Teil hinzufügen möchten oder nicht)

Heutzutage wurden die IE-Browser vieler Leute auf IE9 oder höher aktualisiert, sodass derzeit viele seltsame Dinge passieren. Beispielsweise ist der Browser jetzt IE9, aber der Dokumentmodus des Browsers ist IE8:

Um diese Situation zu verhindern, benötigen wir den folgenden Code, um den Dokumentmodus des IE immer auf dem neuesten Stand zu halten:

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge"</span><span style="color: #0000ff;">></span>

Es gibt einen besseren Weg, es zu schreiben:

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=Edge，chrome=1"</span><span style="color: #0000ff;">></span>

Warum wird nach diesem Code ein chrome=1 hinzugefügt, dieser Google Chrome Frame (Google Embedded Browser Framework GCF) , wenn einige Benutzer dies auf ihren Computern installiert haben? Das Chrome Plug-in ermöglicht es dem IE im Computer, die Webkit-Engine und die V8-Engine für Satz und Berechnung zu verwenden, unabhängig von der Version. Es ist äußerst leistungsfähig, aber wenn der Benutzer Wenn Sie dieses Plug-in nicht installieren, bewirkt dieser Code, dass der IE den Effekt im höchsten Dokumentmodus anzeigt. Ich empfehle Ihnen weiterhin, diesen Code zu verwenden, aber Sie können es auch ohne tun.

Geben Sie die Schreibmethode für CSS3-Medien ein:

Schauen wir uns zunächst den folgenden Code an. Es wird geschätzt, dass viele Menschen in responsivem Website-CSS häufig Code sehen, der dem folgenden ähnelt

<span style="color: #800000;">@media screen and (max-width: 960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
}</span>

Dies sollte als Standardmethode zum Schreiben eines Mediums angesehen werden. Der obige CSS-Code bedeutet: Wenn die Seite kleiner als 960 Pixel ist, führen Sie das darunter liegende CSS aus Seien Sie kein allzu großer Zweifel.

Jemand könnte feststellen, dass der obige Code einen Bildschirm enthält. Dies bedeutet, dass das Gerät angewiesen wird, beim Drucken von Seiten Serifenschriften und bei der Anzeige auf dem Bildschirm serifenlose Schriftarten zu verwenden. Aber jetzt stelle ich fest, dass viele Websites den Bildschirm direkt weglassen, da Ihre Website beim Drucken möglicherweise keine Benutzer berücksichtigen muss. Sie können direkt so schreiben:

<span style="color: #800000;">@media (max-width: 960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
}</span>

Dann gibt es den Code, wenn die Browsergröße größer als 960 Pixel ist :

<span style="color: #800000;">@media screen and (min-width:960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;">orange</span>;
    }<span style="color: #800000;">
}</span>

Wir können die oben genannte Verwendung auch kombinieren:

<span style="color: #800000;">@media screen and (min-width:960px) and (max-width:1200px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;">yellow</span>;
    }<span style="color: #800000;">
}</span>

Der obige Code bedeutet, dass das folgende CSS ausgeführt wird, wenn die Seitenbreite größer als 960 Pixel und kleiner als 1200 Pixel ist.

Zusammenfassung aller Parameter von Medien

Das Obige sind die drei Merkmale von Medienabfragen, die wir am häufigsten verwenden müssen: die Schreibmethoden „größer als“, „gleich“ und „kleiner als“. Die vollständige Funktion des Medienabfrageers ist definitiv mehr als diese drei Funktionen. Hier ist eine Zusammenfassung einiger Erklärungen zur Parameterverwendung:

• Breite:Im Browser sichtbare Breite.

• Höhe: Im Browser sichtbare Höhe.

• Gerätebreite: Die Breite des Gerätebildschirms.

• Gerätehöhe: Die Höhe des Gerätebildschirms.

• Ausrichtung: Überprüfen Sie, ob sich das Gerät derzeit im Quer- oder Hochformat befindet.

• Seitenverhältnis: Ermitteln Sie das Verhältnis der sichtbaren Breite und Höhe des Browsers. (Beispiel: Seitenverhältnis: 16/9)

• Geräte-Seitenverhältnis: Ermitteln Sie das Verhältnis von Breite und Höhe des Geräts.

• Farbe: Die Anzahl der Stellen zur Farberkennung. (Zum Beispiel: min-color:32 erkennt, ob das Gerät über 32-Bit-Farbe verfügt)

• color-index: Überprüfen Sie die Farbe in der Farbindextabelle des Geräts. Der Wert darf keine negative Zahl sein.

• monochrom: Ermitteln Sie die Anzahl der Bits pro Pixel im monochromatischen Bildpufferbereich. (Das ist zu fortgeschritten, ich denke, wir werden es selten verwenden)

• Auflösung: Ermitteln Sie die Auflösung des Bildschirms oder Druckers. (Zum Beispiel: Mindestauflösung: 300 dpi oder Mindestauflösung: 118 dpcm).

• Raster: Erkennen Sie, ob das Ausgabegerät ein Raster oder ein Bitmap-Gerät ist.

Neu gepostet von: 520UED