Analyse zu Medienabfragen von CSS3

Dieser Artikel stellt hauptsächlich CSS3-Medienabfragen vor (responsives Layout ermöglicht die Anpassung verschiedener Auflösungen und Geräte). Jetzt kann ich ihn mit Ihnen teilen.

Medien Abfragen sind eine sehr leistungsstarke Funktion, mit der Sie verschiedene Auflösungen und Geräte anpassen und die von Ihnen erstellten Webseiten in verschiedenen Auflösungen und Geräten anzeigen können, ohne dass der Stil dadurch verloren geht 🎜>

Medienabfragen sind eine sehr leistungsstarke Funktion, mit der Sie verschiedene Auflösungen und Geräte anpassen und Webseiten erstellen können, ohne den Inhalt zu ändern. Die Seite wird unter verschiedenen Auflösungen und Geräten normal angezeigt, ohne dass der Stil verloren geht.

Schauen wir uns zunächst ein einfaches Beispiel an:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Die obige Medienanweisung bedeutet: Wenn die Seitenbreite kleiner oder gleich 600 Pixel ist, rufen Sie die Datei small.css auf Stylesheet zum Rendern Ihrer Webseite. Schauen wir uns zunächst den Inhalt der Medienerklärung an:

1. Selbstverständlich weiß das jeder und bezieht sich auf einen Medientyp und
2 Dazu gibt es nichts, was später vorgestellt wird. (max-width: 600px): Dies ist, vereinfacht gesagt, die Medienbedingung.
Um Media Query besser zu verstehen, kehren wir zum vorherigen Beispiel zurück: Die Konvertierung in CSS lautet:

@media screen and (max-width: 600px) { 
选择器 { 
属性：属性值； 
} 
}

Tatsächlich wird der Stil in der Datei small.css in @media srceen und ( max-width;600px){...} innerhalb der geschweiften Klammern. In der obigen Anweisungsstruktur ist zu erkennen, dass die Attributsätze von Media Query und CSS sehr ähnlich sind:

1. Media Query akzeptiert nur einen einzigen logischen Ausdruck als Wert oder hat keinen Wert.

2. CSS-Attribute werden verwendet, um zu deklarieren, wie Seiteninformationen angezeigt werden; Media Query ist ein Ausdruck, der verwendet wird, um zu bestimmen, ob das Ausgabegerät bestimmte Bedingungen erfüllt.
3. Die meisten Medienabfragen akzeptieren Min/Max-Präfixe Drücken Sie seine logische Beziehung aus und geben Sie an, dass es auf Situationen anwendbar ist, die größer oder gleich oder kleiner oder gleich einem bestimmten Wert sind.
4. CSS-Attribute müssen Attributwerte haben, da ihr Ausdruck nur „true“ oder „true“ zurückgibt false.

Werfen wir einen Blick auf die spezifische Verwendung von Medienabfragen

1. Maximale Breite Max. Breite

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

Das Obige bedeutet: wenn der Bildschirm größer ist als oder Wenn gleich 900px, wird der big.css-Stil zum Rendern der Webseite verwendet.

2. Verwendung mehrerer Medienabfragen

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Medienabfragen können mit mehreren Medienabfragen kombiniert werden. Mit anderen Worten: Eine Medienabfrage kann 0 bis mehrere Ausdrücke enthalten enthalten außerdem 0 bis mehr Schlüsselwörter und einen Medientyp. Wie oben gezeigt bedeutet dies, dass bei einer Bildschirmgröße zwischen 600 und 900 Pixel der style.css-Stil zum Rendern der Webseite verwendet wird.

3. Gerätebreite der Gerätebildschirmausgabe Gerätebreite

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

Der obige Code bezieht sich auf den iphone.css-Stil, der für die maximale Gerätebreite von 480 Pixel gilt Auf dem iPhone-Display bezieht sich beispielsweise die maximale Gerätebreite hier auf die tatsächliche Auflösung des Geräts, die sich auf die Auflösung des sichtbaren Bereichs bezieht.

Wir können Medienabfragen verwenden, um bestimmte Stile für Android-Telefone mit unterschiedlichen Auflösungen bereitzustellen. Damit wird das Problem der Seitenrekonstruktion für Android-Mobiltelefone aufgrund unterschiedlicher Bildschirmauflösungen gelöst.

4. Das Schlüsselwort „not“

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

Das Schlüsselwort „not“ wird verwendet, um einen bestimmten angegebenen Medientyp auszuschließen .

5. Das einzige Schlüsselwort

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

nur wird verwendet, um einen bestimmten Medientyp zu definieren und kann verwendet werden, um Browser auszuschließen, die keine Medienabfragen unterstützen. Tatsächlich wird „only“ häufig zum Ausblenden von Stylesheets für Geräte verwendet, die Media Query nicht, aber Media Type unterstützen. Die wichtigsten sind: Wenn der Stil bei Geräten, die Medienfunktionen (Medienabfragen) unterstützen, normal aufgerufen wird, wird er so behandelt, als ob er nicht vorhanden wäre; bei Geräten, die keine Medienfunktionen (Medienabfragen), aber Medien unterstützen Typen (Medientyp), dies wird der Stil nicht lesen, da er nur liest, anstelle von Bildschirm. Darüber hinaus verwenden Browser, die Media Qqueries nicht unterstützen, den Stil nicht, unabhängig davon, ob sie nur unterstützen.

6. Andere
Wenn der Medientyp nicht explizit in der Medienabfrage angegeben ist, ist der Standardwert alle, wie zum Beispiel:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

Zusätzlich sind Kommas (,). Wird verwendet, um die Nebeneinanderstellung oder oder wie folgt auszudrücken:

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

Der style.css-Stil im obigen Code wird auf Handheld-Geräten mit einer Breite von weniger als oder gleich 480 Pixel oder auf Geräten mit einer größeren Bildschirmbreite verwendet als oder gleich 960px.

Das war's für diesen Abschnitt über die Verwendung von Media Query. Fassen wir zum Schluss die Funktionen zusammen: Media Queries können unter verschiedenen Bedingungen unterschiedliche Stile verwenden und unterschiedliche Rendering-Effekte erzielen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Methode der responsiven zentrierten Anzeige von CSS-Bannerbildern

IE-kompatible Inner-Shadow- und Outer-Shadow-Implementierung und Testcode

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