width and height Media Queries

The width and height media features describe the horizontal and vertical measures for the display a page can be formatted against. They take standard length units, and can be applied to the visual and tactile media types. They can also accept min- and max- prefixes. These properties are designed to specify the viewport of a device (a browser window, for example).

The following code snippet sets the width range for a screen device:

@media screen and (min-width: 600px) and (max-width: 800px)
{@import url(http://www.corecss.com/dummyexample/)}

Note that the height property of the rendering display surface for continuous media is the height of the viewport (the browser window), whereas for static media, like print, it would be the height of the page. The following code snippet provides an example of this:

@media print and (min-height: 8.5in) and (max-height: 11in)
{@import url(http://www.corecss.com/dummyexample/)}