Media Queries and Listeners

Windows Internet Explorer 9 introduced support for media queries in CSS, HTML, XML, and XHTML. Internet Explorer 10 and Windows Store apps using JavaScript introduced support for media query listeners. Media Queries enable web developers to scope a style sheet to a set of precise device capabilities, and media query listeners allow you to use script to react to changes in the media or environment in which your page is running.

Media queries

Media queries enable you to design pages differently for users browsing on a mobile device (that has a very small screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (that has a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.

The following declaration is a typical media query, using the @media rule.


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

In this case, screen indicates the target media type, and max-width is the target media property. The declaration states that the specified rules (no border on div elements) are only to be applied when the page is displayed on a screen with a width of at most 400 pixels. You can use media properties together to create even more specific queries, such as the following.


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

This declaration applies the specified rules when the medium is a screen that has a width of no more than 400 pixels and a height of no more than 600 pixels.

Media query listeners

Media query listeners enable two new capabilities, described later in this topic:

  • Evaluating a media query at runtime using JavaScript
  • Subscribing listeners to changes in the media query's evaluation

Creating a media query listener

To evaluate a media query at run time, an MediaQueryList object is created using the new window method, matchMedia.

MethodDescription

matchMedia(sList)

Accepts a string that contains one or more media queries, and returns an MediaQueryList object.

 

The matchMedia method accepts a media query string and returns a MediaQueryList object. The following example creates a media query that checks whether the width or height of a window is less than a certain size.


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

The MediaQueryList object provides the following properties.

PropertyDescription

matches

Returns "true" if the list of media queries matches the state of the current window; returns "false" otherwise.

media

Returns the serialized version of the media query list, which was used to create the MediaQueryList object.

 

The MediaQueryList object provides the following methods.

MethodDescription

addListener(callback)

Adds the callback function to the list of listeners for the MediaQueryList object. The function is called whenever the evaluation of the media query changes.

removeListener(callback)

Removes the given callback function from the list of listeners for this MediaQueryList object.

 

The matches property is a Boolean value that returns an evaluation of the media query. Using the example above, matches returns true if the window's width is greater than or equal to the minimum that has been specified.


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

Subscribing media query listeners

To detect media query changes, you can subscribe a listener to a MediaQueryList object. The addListener method takes a callback function, and invokes it when the media query changes evaluation. Using the previous media query, the following example subscribes to changes in the media query.


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.
  }
}

The listener invokes the callback function whenever the state of the media actually changes. If the window is resized to be narrower than the specified minwidth attribute value, the callback function is invoked. It is invoked again when the window becomes wider than our min-width. The MediaQueryList object is passed as a parameter to the callback function.

API Reference

Media Queries
Media Query Listeners

Samples and tutorials

Design adaptive websites

Internet Explorer Test Drive demos

CSS3 Media Queries & Media Query Listeners

IEBlog posts

Adapting Your Site to Different Window Sizes
The CSS Corner: CSS3 Media Queries

Specification

Media Queries
CSSOM View Module: Section 4.1

Related topics

Respond to Different Devices With CSS3 Media Queries

 

 

Show:
© 2014 Microsoft. All rights reserved.