Medienabfragen und Listener

Windows Internet Explorer 9 unterstützt jetzt Medienabfragen in CSS, HTML, XML und XHTML. Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen jetzt Medienabfragenlistener. Medienabfragen ermöglichen Webentwicklern das Festlegen des Bereichs eines Stylesheets auf eine Reihe von präzisen Gerätefunktionen. Medienabfragelistener ermöglichen die Nutzung von Skripts als Reaktion auf Änderungen an den Medien oder der Umgebung, auf denen bzw. in der die Seite ausgeführt wird.

Medienabfragen

Medienabfragen ermöglichen Ihnen verschiedene Entwürfe von Seiten für Benutzer, die ein mobiles Gerät (das z. B. über einen sehr kleinen Bildschirm, eine eingeschränkte Farbpalette und eine niedrige Auflösung verfügt) oder ein Netbook (das z. B. über einen kleinen Bildschirm, eine vollständige Farbpalette und eine hohe Auflösung verfügt) oder einen Standardcomputer (der.z. B. über einen großen Bildschirm, eine vollständige Farbpalette und eine hohe Auflösung verfügt) verwendet. Die vollständige Liste der von CSS3-Medienabfragen unterstützten Medieneigenschaften umfasst "width", "height", "device-width", "device-height", "orientation", "aspect-ratio", "device-aspect-ratio", "color", "color-index", "monochrome" und "resolution".

Bei der folgenden Deklaration handelt es sich um eine typische Medienabfrage mit der @media-Regel.


@media screen and (max-width:400px) {div {border:none;}}

In diesem Fall gibt "screen" den Zielmedientyp an, und "max-width" ist die Eigenschaft für das Zielmedium. Die Deklaration gibt an, dass die angegebenen Regeln (kein Rahmen bei div-Elementen) nur anzuwenden sind, wenn die Seite auf einem Bildschirm mit einer Breite von höchstens 400 Pixeln angezeigt wird. Sie können media-Eigenschaften kombinieren, um noch genauere Abfragen wie die folgende zu erstellen.


@media screen and (max-width:400px) and (max-height:600px) {…}

Diese Deklaration wendet die angegebenen Regeln an, wenn es sich bei dem Medium um einen Bildschirm handelt, dessen Breite höchstens 400 Pixel und dessen Höhe höchstens 600 Pixel beträgt.

Medienabfragelistener

Medienabfragelistener ermöglichen zwei neue Funktionen, die weiter unten in diesem Thema beschrieben werden:

  • Auswerten einer Medienabfrage mit JavaScript zur Laufzeit
  • Abonnieren von Listenern für Änderungen an der Auswertung der Medienabfrage

Erstellen eines Medienabfragelisteners

Zum Bewerten einer Medienabfrage während der Laufzeit wird ein MediaQueryList-Objekt mit der neuen Methode matchMedia erstellt.

MethodeBeschreibung

matchMedia(sList)

Akzeptiert eine Zeichenfolge mit einer oder mehreren Medienabfragen und gibt ein MediaQueryList-Objekt zurück.

 

Die matchMedia-Methode akzeptiert eine Medienabfragezeichenfolge und gibt ein MediaQueryList-Objekt zurück. Im folgenden Beispiel wird eine Medienabfrage erstellt, die überprüft, ob die Breite oder Höhe eines Fensters geringer als eine bestimmte Größe ist.


mql = window.msMatchMedia("(min-width:450px)");

Das MediaQueryList-Objekt stellt die folgenden Eigenschaften bereit.

EigenschaftBeschreibung

matches

Gibt "true" zurück, wenn die Liste der Medienabfragen dem Zustand des aktuellen Fensters entspricht, und gibt anderenfalls "false" zurück.

media

Gibt eine serialisierte Version der Medienabfrageliste zurück, mit der das MediaQueryList-Objekt erstellt wurde.

 

Das MediaQueryList-Objekt stellt die folgenden Methoden bereit.

MethodeBeschreibung

addListener(callback)

Fügt die Rückruffunktion der Liste von Listenern für das MediaQueryList-Objekt hinzu. Die Funktion wird immer aufgerufen, wenn sich die Auswertung der Medienabfrage ändert.

removeListener(callback)

Entfernt die angegebene Rückruffunktion aus der Liste von Listenern für das MediaQueryList-Objekt.

 

Die matches-Eigenschaft ist ein boolescher Wert, der eine Auswertung der Medienabfrage zurückgibt. Im oben gezeigten Beispiel gibt matches den Wert true zurück, wenn die Breite des Fensters größer oder gleich dem angegebenen Minimum ist.


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

Abonnieren von Medienabfragelistenern

Wenn Sie Änderungen an Medienabfragen erkennen möchten, können Sie einen Listener für ein MediaQueryList-Objekt abonnieren. Die addListener-Methode akzeptiert eine Rückruffunktion und ruft diese auf, wenn sich die Auswertung der Medienabfrage ändert. Das folgende Beispiel verwendet die oben gezeigte Medienabfrage und abonniert Änderungen an der Medienabfrage.


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

Der Listener ruft die Rückruffunktion auf, sobald sich der Zustand des Mediums tatsächlich ändert. Wenn die Größe des Fensters geändert wird, sodass das Fenster schmaler als der angegebene minwidth-Attributwert ist, wird die Rückruffunktion aufgerufen. Sie wird erneut aufgerufen, wenn die Breite des Fensters die minimale Breite überschreitet. Das MediaQueryList-Objekt wird als Parameter an die Rückruffunktion übergeben.

API-Referenz

Media Queries
Media Query Listeners

Beispiele und Lernprogramme

Entwickeln von adaptiven Websites

Demos für die Internet Explorer-Testversion

CSS3-Medienabfragen und Medienabfragelistener

IEBlog-Beiträge

Anpassen Ihrer Website an verschiedene Fenstergrößen
Die CSS-Ecke: CSS3-Medienabfragen

Spezifikation

Medienabfragen
CSSOM-Ansichtsmodul: Abschnitt 4.1

Verwandte Themen

Reaktion auf verschiedene Geräte mit CSS3-Medienabfragen

 

 

Anzeigen:
© 2014 Microsoft