Was sind die Syntaxschlüsselwörter für CSS3-Medienabfragen?

Das Syntaxschlüsselwort der CSS3-Medienabfrage ist „@media“, wodurch unterschiedliche Medienbedingungen für die Seite festgelegt und entsprechende Stile entsprechend den Bedingungen angewendet werden können; das grundlegende Syntaxformat ist „@media mediatype and|not|only(media feature ) {CSS-Code;}".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Media Queries ist ein neues in CSS3 vorgeschlagenes Konzept, das es ermöglicht, verschiedene Medienbedingungen für die Seite festzulegen und entsprechende Stile basierend auf den Bedingungen anzuwenden.

Das Syntaxschlüsselwort der CSS3-Medienabfrage ist „@media“.

@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 entsprechend der Breite und Höhe des Browsers neu gerendert.

Syntax:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

wird nur verwendet, um das gesamte Abfrageergebnis einzuschränken, nicht, um das gesamte Abfrageergebnis zu negieren. Wenn Sie die Schlüsselwörter nicht oder nur verwenden, muss ein Medientyp explizit angegeben werden und das Schlüsselwort muss am Anfang der gesamten Medienabfrageanweisung stehen.

1) und

Das Schlüsselwort and wird verwendet, um Ausdrücke von Medientypen und mehreren Medienmerkmalen in derselben Medienabfrage zu kombinieren. Das Abfrageergebnis ist nur dann wahr, wenn der Medientyp und das Ergebnis jedes Ausdrucks wahr sind. Zum Beispiel:

screen and (min-width: 700px) and (orientation: landscape)

Das Ergebnis der Medienabfrage ist ein boolescher Wert: entweder wahr oder falsch. Nur wenn alle Teile der und-Verbindung wahr sind, ist das Ergebnis der gesamten Medienabfrageanweisung wahr.

Medienanfragen können auch als Fragen an den Browser betrachtet werden. Die obige Medienabfrage fragt zunächst: „Sind Sie ein Monitor?“ Wenn der Browser mit „Ja“ antwortet, fragt er weiterhin: „Ist Ihre Mindestbreite 700 Pixel?“ Fragen Sie: „Ist Ihr Bildschirm im Querformat?“ Nur wenn die Antworten auf alle drei Fragen „Ja“ lauten, ist das Ergebnis der gesamten Medienabfrageaussage wahr.

2) nur

Das Schlüsselwort „only“ wird zur Begrenzung des Umfangs verwendet und gilt für die gesamten Abfrageergebnisse. Beispiel:

only screen and (color)

gilt nur für Farbdisplaygeräte und nicht für andere Geräte. Es ist äquivalent zu:

not (screen and (color))

3) not

Das Schlüsselwort not wird verwendet, um das gesamte Abfrageergebnis zu negieren. Zum Beispiel:

not (screen and (monochrome))

bedeutet alle Geräte außer monochromen Anzeigegeräten. Es entspricht:

not (screen and (monochrome))

statt:

(not screen) and (monochrome)

Zusätzlich zu einer einzelnen Abfrage ist es auch möglich, eine durch Kommas getrennte Liste von Medienabfragen zu definieren. Wenn das Ergebnis einer Medienabfrage in der Liste wahr ist, ist das Ergebnis der Medienabfrageliste wahr; andernfalls ist das Ergebnis der Medienabfrageliste falsch.

Jede Abfrage in der Medienabfrageliste ist unabhängig voneinander und die Operatoren in einer Abfrage haben keinen Einfluss auf andere Medienabfragen. Daher können Medienabfragelisten mit unterschiedlichen Medientypen und Medieneigenschaften arbeiten. Beispiel:

(min-width: 700px), handheld and (orientation: landscape)

Die obige Medienabfrageliste enthält zwei Medienabfragen. Für jedes Gerät mit einer Mindestbreite von 700 Pixeln oder ein Handheld-Gerät mit horizontalem Bildschirm ist das Ergebnis der Medienabfrageliste wahr, und in anderen Fällen , es ist falsch.

Mit Medienabfragen können Sie damit responsive Layouts erstellen. Es gibt zwei Möglichkeiten, Medienabfragen zu verwenden: Eine besteht darin, die @media-Regel zu verwenden, um das Laden verschiedener CSS-Codes auszuwählen. Die andere besteht darin, das Medienattribut des -Tags zu verwenden, um das Laden verschiedener Stylesheet-Dateien auszuwählen.

Medienabfragen festlegen

1) @media-Regeln verwenden

Verwenden Sie @media-Regeln, um verschiedene Stile entsprechend unterschiedlichen Medienbedingungen in derselben CSS-Datei zu definieren. Wenn ein Benutzer eine Webseite durchsucht, wählt der Browser basierend auf den Ergebnissen der Medienabfrage aus, welcher CSS-Code angewendet werden soll.

Die Syntax der @media-Regel steht nach @media, gefolgt vom Medientyp und den Medieneigenschaften sowie einem Klammerpaar, in dem die entsprechenden Stilregeln definiert sind. Zum Beispiel:

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

Entsprechend der kaskadierenden Natur der Stile überschreiben die später im Stylesheet definierten Stile dieselben Stile in den vorherigen. Daher können Sie am Anfang des Stylesheets grundlegende Stile definieren, um sie an alle Designs anzupassen, und dann Medienabfragen verwenden, um die entsprechenden Teile neu zu schreiben, sodass unterschiedliche Medienbedingungen unterschiedliche Stilregeln anwenden.

2) Mit dem Medienattribut des -Tags werden unterschiedliche Stylesheet-Dateien für unterschiedliche Medienbedingungen definiert, und der Browser wird darauf basierend Die Ergebnisse der Medienabfrage laden verschiedene Stylesheet-Dateien.

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

Hier werden drei Stylesheet-Dateien reset.css, phone.css und screen.css definiert. Alle Anzeigegeräte dürfen reset.css laden, und Anzeigegeräte mit einer Ansichtsfensterbreite von weniger als 480 Pixel dürfen das Telefon laden .css. Lassen Sie screen.css auf Anzeigegeräten mit einer Ansichtsfensterbreite von mehr als 768 Pixel laden.

Es ist ersichtlich, dass Sie bei der ersten Methode mehrmals @media in dieselbe CSS-Datei schreiben müssen. Bei der zweiten Methode müssen Sie das -Tag mehrmals schreiben. Beide Methoden haben den gleichen Effekt. Sie können die Methode auswählen, die Ihnen gefällt.

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

@import url("small.css") screen and (max-width: 360px);

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单，只需在页面所有的CSS之后，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonWas sind die Syntaxschlüsselwörter für CSS3-Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!