Das beste CSS3 Media Queries-Tutorial im Jahr 2024. In diesem Tutorial können Sie CSS2 Medientypen,CSS3 Media Queries,Browser-Unterstützung,Multimedia-Abfragesyntax,CSS3 Medientypen,Einfache Beispiele von Multimedia-Anfrage,CSS3 @media Referenz, lernen
@media
Regel wird in CSS2 beschrieben und können für verschiedene Medientypen unterschiedliche Stilregeln angepasst werden.
Zum Beispiel: Sie können verschiedene Stilregeln für verschiedene Medientypen (einschließlich Displays, tragbare Geräte, Fernseher, etc.).
Aber diese Art von Multimedia-Unterstützung auf vielen Geräten immer noch freundlich genug.
CSS3 Multimedia-Abfrage erbt alle Gedanken CSS2 Medientypen: Anstatt die Art der Ausrüstung zu finden, Einstellungen CSS3 Anzeige nach Anpassung.
Medien-Abfragen können verwendet werden, um viele Dinge zu entdecken, wie zum Beispiel:
Derzeit werden viele für das Apple-Handy, Android Smartphone, Tablet und anderen Geräten verwendet werden, um die Abfrage anzuzeigen.
Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.
Immobilien | |||||
---|---|---|---|---|---|
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Multimedia-Anfrage von einer Vielzahl von Medien zusammensetzt, ein enthalten oder mehrere Ausdrücke, wird nach Ausdruck etabliert zu den Bedingungen zurückkehrt wahr oder falsch.
@media not|only mediatype and (expressions) { CSS-Code; }
Wenn die angegebenen Mediengerätetyp Typ-Matching, die Abfrage wahr, wird das Dokument zeigen die Wirkung der angegebenen Stil in passende Gerät.
Sofern Sie nicht nur die Betreiber verwenden oder auf andere Weise, werden alle Arten der Anzeige auf allen Geräten anpassen.
nicht: nicht auszuschließen bestimmten Vorrichtungen verwendet werden, wie beispielsweise @media nicht (nicht druckenden Ausrüstung) drucken.
nur: einige spezielle Medientypen einzustellen.Unterstützung für Medienanfragen mobile Geräte, wenn es nur ein Schlüsselwort ist, Web-Browser für mobile Geräte wird das einzige Schlüsselwort und Ausdruck nach der Anwendung direkt aus dem Style-Datei ignorieren. Für Medien-Abfragen, wenn das Gerät unterstützt nicht die Fähigkeit zu lesen, aber Medientyp die Art des Webbrowsers, Stichwort begegnet ignoriert nur diese Art Datei.
sehen alle Geräte, sollte diesimmer: alle.
Sie können auch einen anderen Stil-Dateien auf verschiedenen Medien verwenden:
Wert | Beschreibung |
---|---|
alle | Verwendet, für alle Arten von Multimedia-Geräten |
Für Drucker | |
Bildschirm | Für Computer-Bildschirme, Tablets, Smartphones. |
Rede | Für Screen-Reader |
Verwenden von Multimedia-Abfragen können den ursprünglichen Stil entsprechend dem Stil auf dem angegebenen Gerät zu ersetzen, verwendet werden.
Die folgenden Beispiele ändern, um die Hintergrundfarben auf dem Bildschirm sichtbar Fenstergröße von mehr als 480 Pixel Ausstattung:
Die folgenden Beispiele sind sichtbar auf dem Bildschirm Fenstergröße größer als 480 Pixel auf der linken Menüseite schweben:
Entdecken Sie mehr Multimedia - Inhalte können verweisen @media Regeln.