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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Dieser Abschnitt Erläuterung mehrerer Parameter des Codes:

• width = Gerätebreite: Breite entspricht der Breite des aktuellen Geräts

• initial-scale: Anfangsskalierung Scale (standardmäßig auf 1,0 eingestellt)

• minimum-scale: Der minimale Maßstab, auf den der Benutzer zoomen darf (standardmäßig auf 1,0 eingestellt)

• maximaler Maßstab: Das maximale Verhältnis, auf das der Benutzer zoomen darf (Standard ist 1,0)

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

Vorbereitung 2: Kompatible Dateien laden JS

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

<!--[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]-->

Vorbereitung 3: Stellen Sie den IE-Renderingmodus auf ein die höchste Standardeinstellung (Sie können wählen, ob Sie diesen Teil hinzufügen möchten oder nicht)

Heutzutage wurde der IE-Browser vieler Leute auf IE9 oder höher aktualisiert, sodass derzeit viele seltsame Dinge passieren . Zum Beispiel ist es jetzt der IE9-Browser, aber beim Surfen ist der Dokumentmodus des Browsers IE8:

Um diese Situation zu verhindern, benötigen wir den folgenden Code, um den Dokumentmodus von IE immer auf den neuesten Stand zu bringen Datum:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Es gibt noch einen besseren Weg, es zu schreiben:

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Warum wird nach diesem Code ein chrome=1 hinzugefügt, dieser Google Chrome Frame (von Google eingebetteter Browser). FrameworkGCF), wenn einige Benutzer dieses Chrome-Plug-In auf dem Computer installiert haben, kann es unabhängig von der IE-Version auf dem Computer die Webkit-Engine und die V8-Engine zum Satz und zur Berechnung verwenden Wenn der Benutzer dieses Plug-In jedoch nicht installiert, führt dieser Code dazu, 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 CSS3 Media Writing 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

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }}

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. Daran sollte kein großer Zweifel bestehen.

Jemand könnte feststellen, dass im obigen Code ein Bildschirm vorhanden ist. Dies bedeutet, dass das Gerät angewiesen wird, beim Drucken von Seiten serifenlose Schriftarten zu verwenden 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 möglicherweise nicht berücksichtigen muss, wann Benutzer drucken. Sie können direkt so schreiben:

@media (max-width: 960px){
    body{
        background: #ccc;
    }}

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

@media screen and (min-width:960px){
    body{
        background:orange;
    }}

Wir können die obige Verwendung auch kombinieren:

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }}

Der obige Code bedeutet, das folgende CSS auszuführen, wenn die Seitenbreite größer als 960 Pixel und kleiner ist als 1200px.

Zusammenfassung aller Parameter von Medien

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

• width: 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 Zustand befindet.

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

• Geräteseitenverhä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 nicht sein eine negative Zahl.

• monochrom: Ermitteln Sie die Anzahl der Bits pro Pixel im monochromatischen Bildpufferbereich. (Das ist zu fortgeschritten, ich schätze, 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.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von CSS3-Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!