Was sind Medienabfragen in CSS3?

Dieser Artikel bietet Ihnen eine Einführung in Medienabfragen in CSS3. Er hat einen gewissen Referenzwert und ich hoffe, dass er für das Lernen aller hilfreich sein wird.

Responsive Webdesign wird heutzutage immer beliebter, aber Responsive Design bringt auch einige eigene Probleme mit sich, wie zum Beispiel langsames Laden. Aber jetzt gibt es eine Möglichkeit, dieses Problem sehr gut zu lösen. Wir können die Medienabfragemethode verwenden, um das Problem der Anpassung des Stils an verschiedene Geräte zu lösen.

[Empfohlene Kurse: CSS3-Tutorial]

Medienabfrage

Medienabfrage in CSS3, die je nach Größe des Benutzergeräts unterschiedliche Stile aufrufen kann. Dies ist eine einfache und effiziente Möglichkeit, unterschiedliche Inhalte auf verschiedenen Geräten bereitzustellen. Die am häufigsten verwendeten Abfragen sind solche, die die Höhe und Breite des Ansichtsfensters verarbeiten.

Medienabfragen können für Folgendes verwendet werden:

(1) Wenden Sie Stile bedingt mit CSS @media und at-rules an.

(2) ,

(3) Um den Medienstatus zu testen und zu überwachen, verwenden Sie die Methoden Window.matchMedia() und JavaScript.

Medientypen

alle: Funktioniert auf allen Geräten.

Drucken: Für paginierte Materialien und Dokumente, die im Druckvorschaumodus auf dem Bildschirm angezeigt werden.

Bildschirm: Hauptsächlich für Bildschirme geeignet.

Sprache: Hauptsächlich für Sprachsynthesizer geeignet.

Medienfunktionen

Aus Platzgründen zeigen wir Ihnen nur einige der Medienabfragefunktionen.

名称	描述
width	可视化宽度
height	可视化高度
aspect-ratio	视口的宽高比宽高比
orientation	视口的方向
resolution	输出设备的像素密度
prefers-reduced-transparency	透明度设置
grid	设备是否使用网格或位图屏幕
update	输出设备修改内容外观的频率
overflow-block	输出设备如何处理沿块轴溢出视口的内容
overflow-inline	可以滚动沿着内联轴溢出视口的内容

Beispiel:

Sie können das Schlüsselwort und verwenden, um Medienfunktionen mit Medientypen oder anderen Medienfunktionen zu kombinieren, z. B. um Stile auf Querformatgeräte mit einer Breite von mindestens 30em zu beschränken long

@media (min-width: 30em) and (orientation: landscape) { ... }

Beispiel:

<style>

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

Das obige Beispiel bedeutet, dass die Seite rosa wird, wenn sie kleiner als 960 Pixel ist

max-width: Stellt die maximale Breite dar. Wenn sie kleiner als diese Breite ist, wird die folgende Funktion aufgerufen:

Rendering

Zusammenfassung: Das ist alles für diesen Artikel. Das ist der gesamte Inhalt des Artikels. Ich hoffe, dass dieser Artikel jedem ein gewisses Verständnis für Medienanfragen vermitteln kann.

Das obige ist der detaillierte Inhalt vonWas sind Medienabfragen in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!