Medien-Medienabfragen in CSS3

Medienabfragen werden hauptsächlich in responsiven Webseiten verwendet.

1. Initialisierungseinstellungen:

Fügen Sie in der HTML-Datei oben auf der Webseite einen Satz ein:

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

Dieser Satz Der Schlüssel besteht darin, eine Initialisierungseinstellung für die responsive Webseite vorzunehmen, die hauptsächlich Folgendes umfasst:

name="viewport": Markieren Sie das Anzeigegerät als Ansichtsfenster;

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

Anfangsskalierung: das anfängliche Skalierungsverhältnis (Standardeinstellung ist 1,0); minimales Verhältnis, auf das der Benutzer zoomen darf (Standardeinstellung ist 1,0);

maximale Skalierung: Das maximale Verhältnis, auf das der Benutzer zoomen darf (die Standardeinstellung ist 1,0); ob der Benutzer manuell zoomen kann (die Standardeinstellung ist „Nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern).

2. Lösen Sie das Kompatibilitätsproblem des IE-Browsers:

Da der IE-Browser (IE8) keine Medien in HTML5 und CSS3 unterstützt, laden Sie den JS Datei, die zur Lösung des IE-Browser-Kompatibilitätsproblems verwendet wird:

<!--[if lt IE 9]>

	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

Auf das src-Attribut in den beiden <script></script>-Tags verwiesen. Der Dateilink Adresse ist eine Datei an einer festen Adresse, auf die extern direkt verwiesen werden kann, ohne dass ein Download in eine lokale Referenz erforderlich ist.

	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

3. Stellen Sie den IE-Browser auf den höchsten Wert ein:

Zu diesem Zeitpunkt werden zum Beispiel viele seltsame Dinge passieren ist jetzt der IE9-Browser, aber der Dokumentmodus des Browsers ist IE8. Um diese Situation zu verhindern, benötigen wir den folgenden Code, um den Dokumentmodus des IE immer auf dem neuesten Stand zu halten:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Natürlich gibt es eine leistungsfähigere Schreibweise:

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Nach diesem Code wird ein chrome=1 hinzugefügt, was auf Google Chrome zurückzuführen ist Frame ( Google Embedded Browser Framework (GCF). Wenn der Computer des Benutzers dieses Chrome-Plug-In installiert, kann der IE-Browser im Computer Versionsfaktoren vermeiden und die Webkit-Engine und die V8-Engine für Satz und Berechnung verwenden. Wenn der Benutzer dieses Plug-In nicht installiert, führt dieser Code natürlich dazu, dass der IE-Browser den Effekt im höchsten Dokumentmodus anzeigt.

4. CSS3-Medien-Medienabfrage wird wie folgt geschrieben:

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

Dies ist eine Standardmethode zum Schreiben von Medien in einer CSS-Datei Dies bedeutet: Wenn die Seite kleiner als 960 Pixel ist, wird der folgende CSS-Code ausgeführt. Der spezifische Inhalt wird vorerst ignoriert.

Für den Bildschirm im obigen Code bedeutet dies, dass das Gerät angewiesen werden soll, beim Drucken der Seite Serifenschriften und bei der Anzeige auf dem Bildschirm serifenlose Schriftarten zu verwenden. Gegenwärtig verzichten viele Websites direkt auf den Bildschirm, sodass die Notwendigkeit des Benutzers zum Drucken von Webseiten nicht berücksichtigt werden muss. Daher gibt es diese Schreibmethode:

Im Einklang mit dem Prinzip des strengen Denkens habe ich Ich persönlich werde diese Schreibmethode nicht verwenden.

5. CSS3-Medienabfrage-Codekombination:

@media (max-width: 960px){
	body{
		background: #000;
	}
}

Im responsiven Webseitenlayout muss die Medienabfragecodekombination kontinuierlich verwendet werden Größe des angepassten Bildschirms anpassen und je nach Breitenbedingungen unterschiedliche CSS-Stile anwenden.

Wenn die Bildschirmbreite beispielsweise 960 Pixel beträgt, ändern Sie die Hintergrundfarbe der Webseite in Rot:

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

Zum Beispiel: Wenn die Bildschirmbreite maximal 960 Pixel (weniger als 960 Pixel) beträgt, ändern Sie die Hintergrundfarbe der Webseite in Schwarz:

Wenn die minimale Bildschirmbreite beispielsweise 960 Pixel (größer als 960 Pixel) beträgt, ändern Sie sie die Hintergrundfarbe der Webseite auf Orange:

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

Was häufiger vorkommt, ist die gemischte Verwendung, z. B. das Ändern der Hintergrundfarbe der Webseite auf Gelb, wenn die Bildschirmbreite zwischen 960 Pixel und liegt 1200px:

@media screen and (min-width:960px){
	body{
		background:orange;
	}
}

6. Allgemeine Entwicklungsidee:

@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

Die allgemeine Idee der Verwendung von Medienabfragen in CSS3 besteht darin, den Breitenbereich der Webseite auf verschiedenen Geräten zu bestimmen Es gibt drei Arten solcher Bereiche (PC, Tablet, Mobiltelefon), oder es kann vier Typen geben (PC, Tablet, mittelgroßes Mobiltelefon mit großem Bildschirm, Mobiltelefon mit kleinem Bildschirm). Natürlich benötigen Sie möglicherweise nur zwei Typen ( Tablet-, Mobiltelefon- und PC-Seite müssen bei der Entwicklung einer separaten Version nicht als Objekt der CSS3-Medienabfrage verwendet werden) und stellen die erforderlichen Seiten in verschiedenen Breitenbereichen bereit. Wenden Sie verschiedene CSS-Stile auf Elemente an, um sie an verschiedene Geräte anzupassen.

7. Breitenprobleme bei der responsiven Webentwicklung:

In der tatsächlichen Entwicklung ist es normalerweise notwendig, die maximale Breite der responsiven Webseite festzulegen Das Layout wird aufgebläht oder fragmentiert, was zu einer visuellen Überflutung führt, was wir oft als gering bezeichnen.

Lassen Sie uns außerdem über die Breite von Webseiten in aktuellen Anzeigegeräten sprechen (aus Platzgründen werde ich nicht mit der industriellen Revolution beginnen. Die derzeit gängigsten Breiten sind grundsätzlich: PC-Seite (1920px, 1600px). ) größer oder gleich 960px, 1440px, 1280px, 1140px, 960px), Tablets zwischen 960px und 640px (768px, 640px) und Mobiltelefone unter 640px (480px, 320px). Die Breite der Webseite im Anzeigegerät bleibt lange erhalten. Wenn es um das responsive Webseitenbreitendesign geht, reicht es grundsätzlich aus, diese Abmessungen zu berücksichtigen.

8. Zusammenfassung aller Parameter der Medienabfrage:

Die Medienabfrage umfasst auch verwandte Funktionen, die nicht häufig verwendet werden, wie unten gezeigt:

Breite : Sichtbare Breite des Browsers,

• Höhe: Sichtbare Höhe des Browsers,

• Gerätebreite: Bildschirmbreite des Geräts,

• Gerätehöhe: die Höhe des Gerätebildschirms,

• Ausrichtung: erkennt, ob sich das Gerät derzeit im Quer- oder Hochformat befindet,

• aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:检测设备的宽度和高度的比例，

• color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

• color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

• monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

• resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：检测输出的设备是网格的还是位图设备。

9.扩展——在CSS2中同样有媒体查询：

media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：

在HTML文件中的标签中写入这句：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，

如要判断移动设备是否为纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

如要让小于960px的页面执行指定的CSS样式文件，可以这样写：

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

当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。

更多CSS3中的media媒体查询相关文章请关注PHP中文网！