Die @media-Abfrage von CSS3 ist eine leistungsstarke Funktion, die es uns ermöglicht, unterschiedliche Stilregeln basierend auf unterschiedlichen Medientypen und Geräteeigenschaften anzuwenden. Dadurch können wir responsive Designs erstellen, die sicherstellen, dass die Website oder App auf einer Vielzahl von Geräten und Bildschirmgrößen ein großartiges Benutzererlebnis bietet. In diesem Artikel werden die Definition, Syntax, Verwendungsszenarien und häufigen Probleme der @media-Abfrage ausführlich erläutert.
Mit den @media-Regeln von CSS3 können Sie je nach Medientyp und Medieneigenschaften unterschiedliche Stilregeln anwenden. Medientyp (Medientyp) wie screen (Bildschirm), print (Druck) usw., während Medienmerkmale (Medienmerkmale) wie width , height , orientation usw. zur Beschreibung der spezifischen Eigenschaften des Geräts verwendet werden.
Die grundlegende Syntax der @media-Abfrage lautet wie folgt:
@media mediatype and|not|only (Medienfunktion) {
/* CSS-Regeln*/
}screen , print usw. Wenn es weggelassen wird, werden standardmäßig alle Medientypen verwendet. Medienmerkmal : Definieren Sie Bedingungen für Medienmerkmale und -werte, wie z. B. min-width , max-width , orientation usw.In @media-Abfragen können Sie die folgenden logischen Operatoren verwenden, um Medienbedingungen zu kombinieren:
und : Zeigt an, dass alle Bedingungen erfüllt sein müssen. nicht : Gibt an, dass der Stil angewendet wird, wenn die Bedingung nicht erfüllt ist. Nur : Wird verwendet, um zu verhindern, dass ältere Browser, die Medienabfragen nicht unterstützen, Stile anwenden. Komma : Gibt an, dass der Stil angewendet wird, wenn eine von mehreren Bedingungen erfüllt ist.1. Legen Sie Stile entsprechend der Bildschirmgröße fest
@media screen und (min-width: 600px) {
Körper {
Hintergrundfarbe: hellblau;
}
}Wenn die Bildschirmbreite mindestens 600 Pixel beträgt, ändert sich die Hintergrundfarbe der Seite in Hellblau.
2. Responsives Design
@media screen und (max-width: 800px) {
.container {
Breite: 100 %;
}
}
@media screen und (min-width: 801px) {
.container {
Breite: 750px;
}
}Ändern Sie die Containerbreite basierend auf der Bildschirmbreite für ein responsives Design.
3. Druckstil
@media print {
Körper {
Schriftgröße: 12pt;
Farbe: Schwarz;
Hintergrund: weiß;
}
}Legen Sie bestimmte Druckstile fest, z. B. Schriftgröße, Farbe und Hintergrund.
4. Horizontale und vertikale Bildschirme
@media-Bildschirm und (Ausrichtung: Querformat) {
#sidebar {
Anzeige: keine;
}
}Blenden Sie die Seitenleiste aus, wenn sich das Gerät im Querformat befindet.
CSS3 bietet eine Vielzahl von Medienfunktionen. Hier sind einige häufig verwendete Funktionen:
width , min-width , max-width : Definieren Sie die Breite des sichtbaren Bereichs der Seite im Ausgabegerät. height , min-height , max-height : Definieren Sie die Höhe des sichtbaren Bereichs der Seite im Ausgabegerät. Ausrichtung : Definieren Sie die Geräteausrichtung, z. B.portrait (vertikaler Bildschirm) und landscape (horizontaler Bildschirm). Auflösung : Definiert die Auflösung des Geräts. Farbe , Farbindex : Definieren Sie Farbfunktionen und Farbindex.min-width und max-width als Beurteilungsbedingungen verwenden, sollten Sie sicherstellen, dass der Bedingungsbereich von klein nach groß oder von groß nach klein sortiert wird, um Probleme mit der Stilabdeckung zu vermeiden. Stilkonflikte : Stellen Sie sicher, dass Stile in @media-Abfragen nicht durch nachfolgende CSS-Regeln überschrieben werden. Es wird empfohlen, am Ende den @media-Abfragestil zu schreiben. Meta-Tag : Legen Sie <meta name="viewport" content="width=device-width, initial-scale=1.0"> fest, um sicherzustellen, dass mobile Geräte die Seite korrekt rendern können. Syntaxfehler : Stellen Sie sicher, dass die Syntax der @media-Abfrage korrekt ist, insbesondere das Leerzeichen nach dem logischen Operator, und schreiben Sie das Abschlusszeichen „;“ nicht in die Klammern.Die @media-Abfrage von CSS3 ist ein wichtiges Werkzeug zum Erstellen responsiver Designs und ermöglicht es uns, unterschiedliche Stilregeln basierend auf unterschiedlichen Medientypen und Medieneigenschaften anzuwenden. Durch die Nutzung von @media-Abfragen können wir sicherstellen, dass unsere Website oder App auf einer Vielzahl von Geräten und Bildschirmgrößen ein großartiges Benutzererlebnis bietet. Ich hoffe, dieser Artikel kann Ihnen helfen, @media-Abfragen besser zu verstehen und zu verwenden.
Damit ist dieser Artikel über @media-Abfragen in CSS3 abgeschlossen. Für weitere verwandte CSS3-@media-Abfrageinhalte durchsuchen Sie bitte frühere Artikel auf downcodes.com oder stöbern Sie weiter unten in den relevanten Artikeln.