Wozu dienen CSS-Medienabfragen?

Die Rolle der CSS-Medienabfrage: Mit der Medienabfrage können wir CSS-Stile für die Geräteanzeige entsprechend den Eigenschaften der Geräteanzeige festlegen, z. B. Ansichtsfensterbreite, Bildschirmverhältnis, Geräteausrichtung usw. Die Medienabfrage besteht aus den Medien Typ und ein oder mehrere Erkennungsmedien Der bedingte Ausdruck des Attributs.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Die Rolle von CSS-Medienabfragen:

1. Was ist eine Medienabfrage? (Proportion, Geräteausrichtung: Querformat oder Hochformat), um CSS-Stile dafür festzulegen. Eine Medienabfrage besteht 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. So führen Sie Medienabfragen in CSS-Dateien ein: CSS ist ein kaskadierendes Stylesheet. Die späteren Stile überlappen sich mit den vorherigen Stilen.

3. So verwenden Sie Medien

Sie müssen dem HTML-Dokument den folgenden Code hinzufügen, um mit dem Anzeigeeffekt von Mobilgeräten kompatibel zu sein

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

ps:

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

initial-scale =1: Anfängliches Zoomverhältnis (Standard ist 1)

maximum-scale=1: Benutzern erlauben, auf das maximale Verhältnis zu zoomen (Standard ist 1)

user-scalable=no: Benutzer können nicht manuell zoomen

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

Beispiel:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

ps:

Die Bedeutung dieser Medienabfrage ist: Wenn die Bildschirmbreite des Geräts zwischen 320 und 720 Pixel liegt, ist der Hintergrund Die Farbe des Körpers in der Medienabfrage (Hintergrundfarbe: Rot) überlappt die Hintergrundfarbe des vorherigen Körpers. Wenn die Bildschirmbreite des Geräts unter 320 Pixel liegt, ist die Hintergrundfarbe des Körpers in der Medienabfrage (Hintergrundfarbe: Blau). ;) überlappt die vorherige Hintergrundfarbe des Körpers.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonWozu dienen CSS-Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!