Wie ist die grammatikalische Zusammensetzung von Medienabfragen in CSS3?

Die Syntax der Medienabfrage lautet „@media not|only mediatype and (expressions) {CSS code...;}“; die Medienabfrage kann aus mehreren Medien bestehen und einen oder mehrere Ausdrücke enthalten Bedingungen Gibt „true“ oder „false“ zurück, wenn wahr.

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

Die Multimedia-Abfrage von CSS3 übernimmt alle Ideen der CSS2-Multimedia-Typen: Anstatt nach dem Gerätetyp zu suchen, zeigt CSS3 adaptiv entsprechend den Einstellungen an.

Medienabfragen können verwendet werden, um viele Dinge zu erkennen, wie zum Beispiel:

• Breite und Höhe des Ansichtsfensters (Viewport)

• Gerätebreite und -höhe

• Ausrichtung (Smartphone-Querformat, Hochformat)

• Auflösung

Derzeit nutzen viele Geräte wie Apple-Telefone, Android-Telefone, Tablets usw. Multimedia-Abfragen.

Abfragesyntax

@media not|only mediatype and (expressions) {
    CSS 代码...;
 }

Multimedia-Abfrage besteht aus einer Vielzahl von Medien und kann einen oder mehrere Ausdrücke enthalten, je nachdem, ob die Bedingung wahr ist.

Medientyp

Wenn der angegebene Multimediatyp mit dem Gerätetyp übereinstimmt, gibt das Abfrageergebnis „true“ zurück und das Dokument zeigt den angegebenen Stileffekt auf dem passenden Gerät an.

Sofern nicht die Not- oder Only-Operatoren verwendet werden, passen sich alle Stile an die Anzeige auf allen Geräten an.

Wert	Beschreibung
alle	für alle Mediengeräte
Drucken	für Drucker
Bildschirm	für Computerbildschirme, Tablets, Smartphones usw.
Sprache	für Bildschirmleser

Medienfunktionen

Wert	Beschreibung
Aspekt- Verhältnis	Definieren Sie die im Ausgabegerät sichtbare Seite. Das Verhältnis von Bereichsbreite zu Höhe
Farbe	definiert die Anzahl der Farboriginale in jedem Satz von Ausgabegeräten. Wenn es sich nicht um ein Farbgerät handelt, ist der Wert gleich 0
Farbindex	Die Anzahl der in der Farbsuchtabelle des Ausgabegeräts definierten Einträge. Wenn keine Farbnachschlagetabelle verwendet wird, ist der Wert gleich 0
device-aspect-ratio	Definiert das Verhältnis der sichtbaren Bildschirmbreite zur Höhe des Ausgabegeräts.
device-height	Definiert die sichtbare Höhe des Bildschirms des Ausgabegeräts.
Gerätebreite	Definiert die sichtbare Breite des Bildschirms des Ausgabegeräts.
height	Definieren Sie die Höhe des sichtbaren Bereichs der Seite im Ausgabegerät.
max-aspect-ratio	Definiert das maximale Verhältnis der sichtbaren Breite zur Höhe des Bildschirms des Ausgabegeräts.
max-color	Definieren Sie die maximale Anzahl von Farboriginalen in jeder Gruppe von Ausgabegeräten.
max-color-index	Definiert die maximale Anzahl von Einträgen in der Farbsuchtabelle des Ausgabegeräts.
max-device-aspect-ratio	Definiert das maximale Verhältnis der sichtbaren Breite zur Höhe des Bildschirms des Ausgabegeräts.
max-device-height	Definiert die maximale Höhe, die auf dem Bildschirm des Ausgabegeräts sichtbar ist.
max-device-width	Definiert die maximale sichtbare Breite des Bildschirms des Ausgabegeräts.
max-height	Definiert die maximale sichtbare Bereichshöhe der Seite im Ausgabegerät.
max-resolution	Definiert die maximale Auflösung des Geräts.
max-width	Definiert die maximale sichtbare Bereichsbreite der Seite im Ausgabegerät.
min-device-width	Definiert die minimale sichtbare Breite des Bildschirms des Ausgabegeräts.
min-device-height	Definiert die minimale sichtbare Höhe des Bildschirms des Ausgabegeräts.
min-height	Definiert die minimale sichtbare Bereichshöhe der Seite im Ausgabegerät.
min-width	Definiert die minimale sichtbare Bereichsbreite der Seite im Ausgabegerät.
orientation	Definiert, ob die Höhe des sichtbaren Bereichs der Seite im Ausgabegerät größer oder gleich der Breite ist.
Auflösung	Definieren Sie die Auflösung des Geräts. Zum Beispiel: 96 dpi, 300 dpi, 118 dpcm
width	definiert die Breite des sichtbaren Bereichs der Seite im Ausgabegerät.

Zum Beispiel
Die Bildschirmbreite ist größer als 480 Pixel und die Schriftgröße ist auf 16 Pixel eingestellt.

@media screen and (min-width: 480px) {
    body {
       font-size:16px;
    }
}

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWie ist die grammatikalische Zusammensetzung von Medienabfragen in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!