@media rule
Sets the media types for a set of rules in a styleSheet object.
Syntax
@media sMediaType { Media-Rule+ }
Media-Rule
@media sRules
Parameters
sMediaType
String that specifies one of the following media types:
Value | Meaning |
---|---|
screen |
Output is intended for computer screens. |
|
Output is intended for printed material and for documents viewed in Print Preview mode. |
all |
Output is intended for all devices. |
sRules
String that specifies one or more rules in a styleSheet object.
Remarks
The rule has no default value.
Dynamic HTML (DHTML) expressions can be used in place of the preceding value(s). As of Windows Internet Explorer 8, expressions are not supported in IE8 Standards mode. For more information, see About Dynamic Properties.
Windows Internet Explorer 9 introduces support for media queries. 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 Windows Internet Explorer is running, and all expressions in the media query are true. The following media features are supported:
Examples
Live example: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html