Jump to: navigation, search


This article is Not Ready.

W3C Recommendation


The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any). For paged media, this is the width of the page box (as described by CSS2, section 13.2 [CSS21]).

The width media query returns the width of the layout viewport, also called the initial containing block. This is equal to the default width of the html element. Thus, it tells you how much space the browser allows your CSS layout to take.

The width media query is one of the two vital ingredients of responsive web design; the other one is the meta viewport tag. The width media query is very reliable across browsers, and using it will not raise compatibility issues.

The width media query is always, in all browsers, equal to document.documentElement.clientWidth.

Needs Examples: This section should include examples.

@media screen and (min-width: 400px) and (max-width: 700px) { … }