width media feature

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


The specified length value can't be negative. For information about supported length units, see CSS Values and Units Reference.


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

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

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.