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" />
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) { 选择器 { 属性:属性值; } }
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" />
2. Verwendung mehrerer Medienabfragen
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
3. Gerätebreite der Gerätebildschirmausgabe Gerätebreite
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
4. Das Schlüsselwort „not“
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
5. Das einzige Schlüsselwort
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
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" />
<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-BannerbildernIE-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!