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!
