CSS3 Media Queries

CSS2 Medientypen

@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 Media Queries

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:

• die Ansichtsfenster (Fenster) in Breite und Höhe
• Breite und Höhe der Vorrichtung
• Gegen (Smartphone horizontalen Bildschirm, vertikale Bildschirm).
• Auflösung

Derzeit werden viele für das Apple-Handy, Android Smartphone, Tablet und anderen Geräten verwendet werden, um die Abfrage anzuzeigen.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.

Multimedia-Abfragesyntax

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:

CSS3 Medientypen

Einfache Beispiele von Multimedia-Anfrage

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:

CSS3 @media Referenz

Entdecken Sie mehr Multimedia - Inhalte können verweisen @media Regeln.