CSS @media rule
Topic: CSS3 Properties ReferencePrev|Next
Description
The @media rule can be used to define style rules for multiple media types in a single style sheet. It must be followed by a comma-separated list of media types and a block that contains rules.
Syntax
The syntax of this at-rule is given with:
|
@media media type,... { /* media-specific rules */ } |
The example below shows the @media property in action.
Example
Try this code »@media screen{
body {
color: #32cd32;
font-family: Arial, sans-serif;
font-size: 14px;
}
}
@media print {
body {
color: #ff6347;
font-family: Times, serif;
font-size: 12pt;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}Note: Style rules outside of @media rules apply to all media types that the style sheet applies to. At-rules inside @media are invalid in CSS2.1
Browser Compatibility
The @media rule is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Media Types.
