Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

@media rule

Sets the media types for a set of rules in a styleSheet object.


@media sMediaType { Media-Rule+ }


@media sRules



String that specifies one of the following media types:


Output is intended for computer screens.


Output is intended for printed material and for documents viewed in Print Preview mode.


Output is intended for all devices.



String that specifies one or more rules in a styleSheet object.


The rule has no default value.

Media queries enable you to scope a style sheet to a set of precise device capabilities. For instance, you might want 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).

A media query consists of a media type (sMediaType) and zero or more expressions (sMediaFeatures) that check for the conditions of particular media features. A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the computer on which the Windows Store app using JavaScript is running, and all expressions in the media query are true. The following media features are supported:


Live example: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

In the following example, the @media rule is used to specify the font-size attribute of the body element for two media types.

// For computer screens, the font size is 12pt.
@media screen {
   body {font-size:12pt;}
// When printed, the font size is 8pt.
@media print {
   body {font-size:8pt;}

The following declaration is a typical media query. 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 in a browser window with a width of at most 400 pixels.

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

You can use media properties together to create even more specific queries, such as the following. This declaration applies the specified rules when the medium is a screen and the browser window has a width of no more than 400 pixels and a height of no more than 600 pixels.

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

See also




© 2015 Microsoft