Describes the width of the targeted display area of the output device. For continuous media (such as a webpage), this is the width of the viewport, including the size of a rendered scroll bar. For paged media, this is the width of the page box.
Possible values
- Value: <length>
- Applies to: visual and tactile media types
- Accepts min/max prefixes: yes
Remarks
The specified length value can't be negative. For information about supported length units, see CSS Values and Units Reference.
Examples
The following declaration is a typical media query for width, 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 feature. 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 viewport 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, and when the viewport has a width of no more than 400 pixels and a height of no more than 600 pixels.
Build date: 11/29/2012
