Was bewirkt die Bootstrap-Medienabfrage?

In Bootstrap können Medienabfragen das verwendete Gerät anhand der Bildschirmgröße unterscheiden und unterschiedliche Stile unter unterschiedlichen Bedingungen festlegen, sodass die Seite unter verschiedenen Endgeräten unterschiedliche Rendering-Effekte erzielen kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Bootstrap-Medienabfrage verwendet die Größe des Bildschirms, um das von Ihnen verwendete Gerät zu identifizieren

• Extra klein Geräte (Mobiltelefone, weniger als 768 Pixel)

• Kleine Geräte (Tablets, ab 768 Pixel)

• Mittelgroße Geräte (Desktops, ab 992 Pixel)

• Große Geräte (große Desktops, ab 1200 Pixel)

Medienabfragen können in verschiedenen Formaten verwendet werden. Verwenden Sie unterschiedliche Stile unter unterschiedlichen Bedingungen, um unterschiedliche Rendering-Effekte auf der Seite unter verschiedenen Endgeräten zu erzielen. Wir haben kurz erklärt, wie Medienabfragen in Projekten referenziert werden, aber für Medienabfragen gelten eigene Nutzungsregeln. Im Einzelnen erfahren Sie hier, wie Sie Medienabfragen verwenden.

@media 媒体类型and （媒体特性）{你的样式}

Hinweis: Wenn Sie Medienabfragen verwenden, müssen Sie mit „@media“ beginnen, dann den Medientyp angeben (kann auch als Gerätetyp bezeichnet werden) und anschließend Medieneigenschaften angeben (können auch als Geräteeigenschaften bezeichnet werden). Die Schreibmethode für Medieneigenschaften ist der Schreibmethode für Stile sehr ähnlich. Sie ist hauptsächlich in zwei Teile unterteilt. Der erste Teil bezieht sich auf die Medieneigenschaften und der zweite Teil ist der durch die Medieneigenschaften angegebene Wert zwischen den beiden Teilen verwendet. Beispiel:

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. Maximale Breite max-width

„max-width“ ist die am häufigsten verwendete Funktion unter den Medieneigenschaften. Dies bedeutet, dass, wenn der Medientyp kleiner oder gleich der angegebenen Breite ist Stil wird wirksam. Zum Beispiel:

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

Das Obige bedeutet: Wenn der Bildschirm kleiner oder gleich 480 Pixel ist, werden die Werbeblöcke (.ads) auf der Seite ausgeblendet.

2. Mindestbreite min-width

„min-width“ ist das Gegenteil von „max-width“, was bedeutet, dass der Stil wirksam wird, wenn der Medientyp größer oder gleich der angegebenen Breite ist .

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

Das Obige bedeutet: Wenn der Bildschirm größer oder gleich 900 Pixel ist, beträgt die Breite des Containers „.wrapper“ 980 Pixel.

3. Verwendung mehrerer Medienfunktionen

Medienabfragen können das Schlüsselwort „und“ verwenden, um mehrere Medienfunktionen zu kombinieren. Mit anderen Worten: Eine Medienabfrage kann 0 bis mehr Ausdrücke enthalten, und der Ausdruck kann 0 bis mehr Schlüsselwörter sowie einen Medientyp enthalten.

Wenn der Bildschirm zwischen 600 und 900 Pixel groß ist, wird die Hintergrundfarbe des Körpers als „#f5f5f5“ gerendert, wie unten gezeigt.

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

4. Gerätebreite der Gerätebildschirmausgabe

Auf Smart-Geräten wie iPhone, iPad usw. können Sie den entsprechenden Stil auch entsprechend der Größe des Geräts einstellen (oder die entsprechende Stildatei aufrufen). Bildschirmgerät. Ebenso können Sie für Bildschirmgeräte auch die entsprechenden Parameter „min/max“ verwenden, z. B. „min-device-width“ oder „max-device-width“.

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

Der obige Code bezieht sich auf den „iphone.css“-Stil, der für die maximale Gerätebreite von 480 Pixel geeignet ist, wie z. B. die Anzeige auf dem iPhone. Die „max-device-width“ bezieht sich hier auf die tatsächliche Auflösung des Gerät, auch Es bezieht sich auf die visuelle Bereichsauflösung.

5. Nicht-Schlüsselwort

Die Verwendung des Schlüsselworts „nicht“ wird verwendet, um einen bestimmten angegebenen Medientyp auszuschließen, d. h. es wird verwendet, um Geräte auszuschließen, die dem Ausdruck entsprechen. Mit anderen Worten bedeutet das Schlüsselwort not, dass die Inversionsoperation für den folgenden Ausdruck ausgeführt wird, z. B.:

@media not print and (max-width: 1200px){样式代码}

Der obige Code gibt an, dass der Stilcode auf allen Geräten verwendet wird, mit Ausnahme von Druckgeräten und Gerätebreiten von weniger als 1200 Pixel.

6. Das einzige Schlüsselwort

nur wird zur Angabe eines bestimmten Medientyps verwendet und kann zum Ausschließen von Browsern verwendet werden, 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 unterstützen, normal aufgerufen wird, wird er so behandelt, als ob er nicht vorhanden wäre. Bei Geräten, die keine Medienfunktionen, aber Medientypen unterstützen, wird der Stil nicht gelesen Da zuerst nur gelesen und dann nicht angezeigt wird, wird der Stil von Browsern, die Medienabfragen nicht unterstützen, unabhängig davon, ob sie nur unterstützt werden, nicht übernommen. Beispiel:

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

Wenn der Medientyp in der Medienabfrage nicht explizit angegeben ist, ist der Standardwert alle, z. B.:

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

Darüber hinaus können Sie im Stil auch mehrere Anweisungen verwenden, um denselben Stil auf verschiedene Medien anzuwenden Typen und Medien In den Eigenschaften ist die Spezifikationsmethode wie folgt.

<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 Bildschirmbreite von mehr als oder gleich 960 Pixel verwendet.

Bisher werden CSS3-Medienabfragen von vielen Browsern unterstützt und in allen modernen Browsern außer IE6-8-Browsern perfekt unterstützt. Ein weiterer Unterschied besteht darin, dass Medienabfragen in verschiedenen Browsern nicht wie andere CSS3-Eigenschaften mit einem Präfix versehen werden müssen.

【Verwandte Empfehlung: „Bootstrap-Tutorial“】

Das obige ist der detaillierte Inhalt vonWas bewirkt die Bootstrap-Medienabfrage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!