Zusammenfassung des Wissens über CSS3-Medienabfragen

1. Was ist eine Medienabfrage?

Medienabfragen ermöglichen es uns, das Gerät basierend auf den Eigenschaften der Geräteanzeige festzulegen (z. B. Ansichtsfensterbreite, Bildschirmverhältnis, Geräteausrichtung). : Querformat oder Hochformat. Um CSS-Stile zu definieren, besteht eine Medienabfrage aus einem Medientyp und einem oder mehreren bedingten Ausdrücken, die Medieneigenschaften erkennen. Medieneigenschaften, die in Medienabfragen erkannt werden können, sind width , height und color (usw.). Mithilfe von Medienabfragen können Sie den Anzeigeeffekt für bestimmte Ausgabegeräte anpassen, ohne den Seiteninhalt zu ändern.

2. Warum erfordert Responsive Design Medienabfragen?
Wenn kein CSS3-Medienabfragemodul vorhanden ist, kann es nicht auf Geräteeigenschaften abzielen (z. B. die Breite des Ansichtsfensters). ) Legen Sie bestimmte CSS-Stile fest

3. So führen Sie Medienabfragen in CSS-Dateien ein

Medienabfragen werden am Ende des CSS-Stils geschrieben Code, CSS Es handelt sich um ein kaskadierendes Stylesheet. Die späteren Stile überlappen die vorherigen Stile

4 So verwenden Sie Medien

Vorbereitung 1: Meta-Tag festlegen

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

Erklärung mehrerer Parameter dieses Codes:

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

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

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

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

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

Vorbereitung 2: Kompatible Datei JS laden

Weil IE8 unterstützt weder HTML5 noch CSS3-Medien. Wir müssen zwei JS-Dateien laden, um sicherzustellen, dass unser Code kompatibel ist:

Vorbereitung 3: IE-Rendering einrichten Der Modus ist standardmäßig auf den höchsten Wert eingestellt (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 , also passieren zu diesem Zeitpunkt viele seltsame Dinge, wie zum Beispiel: Es ist jetzt ein IE9-Browser, aber der Dokumentmodus des Browsers ist IE8:

Um dies zu verhindern In dieser Situation benötigen wir den folgenden Code, um den Dokumentmodus des IE zu aktivieren. Immer auf dem neuesten Stand:

Auf diesen Code folgt ein chrome=1, dieser Google Chrome Frame (Google Embedded Browser Framework GCF). ) , falls vorhanden Wenn dieses Chrome-Plug-in auf dem Computer des Benutzers installiert ist, kann es unabhängig von der IE-Version auf dem Computer die Webkit-Engine und den V8 verwenden Engine für Satz und Berechnung, die äußerst leistungsfähig ist. 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.

2. So schreiben Sie CSS-responsive Medienabfragen in CSS-Dateien

Beispiel: Ändern Sie den Stil entsprechend unterschiedlicher Breiten

HTML:

John Doe

Mary Moe< ; /li>

Amanda Panda

CSS:

//Breite weniger als 500 Pixel

@media screen und (max-width:500px) {

ul> li {

                  Hintergrund: blau;

                                                                                                                               >

/ /Breite bei 500-700 Pixel

@media screen und (max-width:700px) und (min-width:501px) {

                                                                                                            🎜>                        Hintergrund: Goldrute;            🎜>

@media screen und (max-width:1000px) und (min-width:701px) {

                                                                                                                               Schriftgröße: 20px; >}

//Breite größer als 1000 Pixel

@media screen and (min-width:1001px) {

ul>li {

                                                                                                                                                                                   Hintergrund: violett; >                          Größe: 22px; 🎜>

Kurz gesagt, @media Es gibt drei Hauptpunkte:

1, Meta-Tag

2, kompatibel mit IE;

3, @media Bildschirm und (max-width:980px){} (Beispielstil)

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