Detaillierte Einführung in CSS3-Medienabfragen für responsives Layout

Verwenden Sie unser CSS3, um ein responsives Layout zu implementieren

Nur ​​eine flexible Box zu haben reicht nicht aus
CSS3 erweitert auch das Medienattribut und fügt hinzu Eine Modulfunktion Medienabfragen
MedienabfragenFunktion

Medienabfragen wird eingeführt

Mit der rasanten Beliebtheit mobiler Endgeräte

Immer mehr Benutzer nutzen Smartphones. Tablets usw.
Alles unter Berücksichtigung der Bedürfnisse der Benutzer
Wir müssen sicherstellen, dass Benutzer beim Surfen auf der Seite auf verschiedenen Geräten ein gutes Erlebnis haben
Auf diese Weise benötigen wir Medienabfragen
Es ermöglicht uns Unterschiedliche Geräte oder Geräte mit unterschiedlichen Bedingungen haben unterschiedliche Stile
Wenn das mobile Endgerät jedoch sehr wichtige Anforderungen hat
es ist besser, eine spezielle Seite für das mobile Endgerät zu entwickeln
Werfen wir einen Blick auf die Einführung der Medienabfragemethode

Medienabfrage lädt selektiv Dateien

Werfen wir zunächst einen Blick auf die Link-Methode

So wird es in CSS2 gemacht
Verwenden Sie zur Einführung das Link-Tag und das Medienattribut verschiedene Stylesheets (Wenn die Bedingungen erfüllt sind)

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

Hier werden zwei Konzepte vorgestellt

Eines ist
Medientyp (Medientyp) und der Bildschirm hier Eins ist
Medieneigenschaften (Medienabfrage), die maximale Breite hier: 600px

Medienabfrage ist eine erweiterte Version des CSS3-Medientyps

Tatsächlich kann Medienabfrage als Medien betrachtet werden Typ (Beurteilungsbedingung) + CSS (konform mit den Regeln für den bedingten Stil)

Die Übersetzung dieses Codes lautet

Wenn das Medienmedium ein Bildschirmtyp ist und die Fensterbreite ≤ 600 Pixel beträgt, führen Sie demo.css ein Stildatei

Medienabfrage wird optional hinzugefügt. Stil

Was wir in CSS3 tun, ist, @media-Regeln in CSS-Dateien zu verwenden, um verschiedene Stile hinzuzufügen

Im Vergleich zu Links können Seitenanfragen reduziert werden und hat bessere Ergebnisse

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

Andere Medienabfrage-Einführungen

Es gibt viele, viele Medienabfragen, wir müssen nicht so viel wissen

Die einzigen zwei häufig verwendeten sind Das obige
@import kann auch Medienabfragen verwenden

@import url(demo.css) screen;

Medienabfragen verwenden

Wenn wir mehrere Medieneigenschaften

angeben möchten, verwenden Sie einfach das und-Schlüsselwort
Bei der Spezifikation des Medieneigenschaftenteils müssen Klammern verwendet werden.

media="screen and (min-width: 601px) and (max-width: 800px)"

Der Stil wird in 601-Pixel-Bildschirmen zwischen ~800 Pixel angewendet.

---

Die Medienabfrage verfügt nicht über alternative Medienfunktionen oder spezifiziert diese nicht. Wir können jedoch durch Kommas getrennte Listenformate

media="screen and (min-width: 601px), print and (min-width: 6in)"

verwenden, die auf Bildschirmen mit mehr als 601 Pixeln angewendet werden sollen, oder mindestens 6 Druckgeräte für Zollbreites Papier verwenden

---

Medienabfragen können negative Bedingungen angeben

Wir müssen das Schlüsselwort nicht am Anfang der Medienerklärung verwenden.
Beachten Sie, dass es nicht separat vor einer einzelnen Bedingung deklariert werden kann, da dies nicht die gesamte Medienerklärung negiert.

media="not screen and (min-width: 600px) and (max-width: 800px)"

Der Stil wird auf Bildschirme angewendet, die nicht zwischen 600px und 800px liegen

---

Zusätzlich zum Schlüsselwort not gibt es auch nur ein

, das dem Ausblenden von Medienabfragen in frühen Browsern
ähnelt nicht und muss am Anfang der Mediendeklarationserklärung
wie dieser Erklärung angegeben werden

media="screen and (min-width: 601px) and (max-width: 800px)"

Frühe Browser können es nur verstehen als

media="screen"Da es Medieneigenschaften nicht versteht , werden Stilregeln auf alle Bildschirmgeräte angewendet
, aber mit dem einzigen Schlüsselwort

media="only screen and (min-width: 601px) and (max-width: 800px)"

frühere Browser werden es verstehen. Für

media="only", aber der einzige Medientyp existiert nicht, also existiert er nicht wendet keine Stile an
Funktion zum Ausblenden von Medienabfragen aus früheren Browsern implementiert

Medientypen und Medieneigenschaften

Medientyp

Obwohl es viele Schlüsselwörter für Medien gibt Typ, die meisten davon wurden aufgegeben (wer verwendet sie)

Die am häufigsten verwendeten sind
alle, Bildschirm und Druck

td>

Medientyp

Beschreibung

alle

Alle Mediengeräte

Bildschirm

Farbbildschirm: Computer, Tablets, Smartphones...

Drucken

Drucker, Druckvorschau

Sprache

Vorkommendes Gerät: Bildschirmlesegerät.

Akustisch

(veraltet) Stimme und AudioSynthesizer

Braille

(veraltet) Braille-Touch-Feedbackgerät für Blinde

geprägt

(veraltet)Brailledrucker mit Paginierung

媒体类型	描述
all	所有媒体设备
screen	彩色屏幕： 电脑、平板、智能机..
print	打印机、打印预览
speech	发生设备：屏幕阅读器..
aural	（已废弃）语音和音频合成器
braille	（已废弃）用盲人用点字法触觉回馈设备
embossed	（已废弃）分页的盲人用点字法打印机
handheld	（已废弃）便携设备：小型电话..
projection	（已废弃）投影设备：幻灯片..
tty	（已废弃）使用固定密度字母栅格的媒体：电传打字机和终端..
tv	（已废弃）电视机类型设备：电视、网络电视..

Handheld

(veraltet) Tragbares Gerät: kleines Telefon.

Projektion

(veraltet) Projektionsgerät: Dia..

tty

(veraltet) Medien, die ein Buchstabenraster mit fester Dichte verwenden: Fernschreibmaschinen und Terminals..

tv

(veraltet) Arten von Fernsehgeräten Ausrüstung: TV, Internet-TV...

Medienfunktionen

Es gibt viele Medienfunktionen, und viele davon werden nicht verwendet

媒体类型	描述
aspect-ratio	输出设备中的页面可见区域宽度与高度的比率
color	输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	输出设备的屏幕可见宽度与高度的比率
device-height	输出设备的屏幕可见高度
device-width	输出设备的屏幕可见宽度
grid	查询输出设备是否使用栅格或点阵
height	输出设备中的页面可见区域高度
max-aspect-ratio	输出设备的屏幕可见宽度与高度的最大比率
max-color	输出设备每一组彩色原件的最大个数
max-color-index	输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio	输出设备的屏幕可见宽度与高度的最大比率
max-device-height	输出设备的屏幕可见的最大高度
max-device-width	输出设备的屏幕最大可见宽度
max-height	输出设备中的页面最大可见区域高度
max-monochrome	在一个单色框架缓冲区中每像素包含的最大单色原件个数
max-resolution	设备最大分辨率
max-width	输出设备中页面最大可见区域宽度
min-aspect-ratio	输出设备中页面可见区域宽度与高度的最小比率
min-color	输出设备每一组彩色原件的最小个数
min-color-index	输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio	输出设备屏幕可见宽度与高度的最小比率
min-device-width	输出设备的屏幕最小可见宽度
min-device-height	输出设备的屏幕的最小可见高度
min-height	输出设备中的页面最小可见区域高度
min-monochrome	一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	设备的最小分辨率
min-width	输出设备中的页面最小可见区域宽度
monochrome	在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	输出设备中的页面可见区域高度是否大于或等于宽度
resolution	设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	电视类设备的扫描工序
width	输出设备中的页面可见区域宽度

Achten Sie darauf, zwischen Gerätebreite/-höhe und Breite/Höhe zu unterscheiden
Gerätebreite/-höhe ist die Breite des Geräts (nicht die Breite des Browsers)
Breite/Höhe ist die Größe unseres Browserfensters
Verwenden Sie DokumentElement.clientWidth/ clientHeight, das ist derWert des Ansichtsfensters

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS3-Medienabfragen für responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!