CSS verwendet @media-Medienabfragen für responsives Design. Was sind Medienabfragen?

Mit der Entwicklung des Internets sind überall verschiedene mobile Geräte wie Smartphones und Tablets zu sehen. Wie lässt sich unsere Website auf verschiedenen Mobilgeräten richtig gestalten? Das Schreiben eines Codesatzes für jedes Gerät ist mühsam und erfordert viel Arbeit. Dann verwenden kluge Programmierer eine Reihe von Codes, um die Website auf Geräten unterschiedlicher Größe angemessen anzuzeigen. Daher wurde das Responsive-Design-Modell geboren, dessen Kern die „Medienabfrage“ ist.

1. Was ist eine Medienabfrage?

Mit der Medienabfrage können wir die Eigenschaften der Geräteanzeige bestimmen (z. B. Ansichtsfensterbreite, Bildschirmverhältnis, Geräteausrichtung: Querformat oder Porträt) Um CSS-Stile dafür festzulegen, 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.

Mit der @media-Abfrage können Sie verschiedene Stile für verschiedene Medientypen definieren. @media kann verschiedene Stile für unterschiedliche Bildschirmgrößen festlegen. Insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich. Wenn Sie die Browsergröße zurücksetzen, wird die Seite auch basierend auf der Breite und Höhe des Browsers neu gerendert.

2. Verwendung von @media media query

a. Fügen Sie dem HTML-Dokument den folgenden Code hinzu, um mit dem Anzeigeeffekt mobiler Geräte kompatibel zu sein

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

width=device-width: Die Breite entspricht der Breite des aktuellen Geräts
initial-scale=1: Das anfängliche Skalierungsverhältnis (Standard ist 1)
maximum-scale=1: Erlauben Sie dem Benutzer, auf die maximale Skalierung zu zoomen (Standard ist 1).
user-scalable=no: Benutzer können nicht manuell skalieren

b. Schreiben Sie responsive Medienabfragen in CSS-Dateien

Grundlegende Syntax : @media Medientyp und (Medienfunktionen) {Stil}

Beispiel 1:

@media screen and (max-width:480px){
body {
background:red
  }
}

bedeutet: Wenn der Bildschirm kleiner oder gleich 480 Pixel ist, wird die Hintergrundfarbe auf der Seite rot .

Beispiel 2:

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

bedeutet: Wenn der Bildschirm größer oder gleich 900 Pixel ist, beträgt die Schriftgröße auf der Seite 20 Pixel.

Beispiel 3:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

bedeutet: Wenn der Bildschirm zwischen 600 und 900 Pixel groß ist, ist die Hintergrundfarbe des Körpers „#f5f5f5“.

Zusammenfassung: Das Obige stellt vor, was die Medienabfrage @media ist, und gibt Beispiele für die Verwendung von Medienabfragen.

Das obige ist der detaillierte Inhalt vonCSS verwendet @media-Medienabfragen für responsives Design. Was sind Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!