Using Media Queries with CSS

Media Features for setting conditions in Media Queries
Feature Value Min/Max Description
width Length Yes Width of display area
heigh Length Yes Height of display area
device-width Length Yes Width of rendering area
device-height Length Yes Height of rendering area
orientation portrait or landscape No Orientation of device
aspect-ratio Ratio Yes Ratio of width to height
device-aspect-ratio Ratio Yes Ratio of device-width to device-height
color Integer Yes Number of bits per color component (if not color, the value is 0)
color-index Integer Yes Number of entries in output device's color lookup table
monochrome Integer Yes Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0)
resolution Resolution Yes Density of pixels of output device
scan progressive or interlace No Scanning process used by TV devices
grid 0 or 1 No If set to 1, this specifies that the device is grid-based, such as a teletype terminal or a phone display with only one fixed font (all other devices are 0)

 

Precede media types with the only keyword to hide them from earlier browsers

 

width and height Dimensions of the viewport, including any scrollbars
device-width and device-height Dimensions of the screen

 

You specify the value for a media feature after a colon in the same way you do for a CSS property. Each condition is wrapped in parentheses and added to the media declaration using the keyword and

 

media="screen and (min-width: 361px)"

 

media="screen and (min-width: 361px) and (max-width: 768px)"

 

Some media features, such as color, grid, and monochrome, can be used as conditions without specifying a value.

 

Property Accepted Values Description
width Integer or device-width This sets the width of the mobile viewport to the specified number of pixels or to the width of the device. When specifying an actual width, the valid range is 200-10,000
height Integer or device-height On iOS, this sets the width of the viewport in landscape orientation to the specified number of pixels or to the height of the device. The valid range is 223-10,000
initial-scale Number with decimal fraction This sets the initial scaling factor of the display. The range is determined by the minimum-scale and maximum-scale properties
minimum-scale Number with decimal fraction The valid range is any number above zero to 10.0. The default is 0.25.
maximum-scale Number with decimal fraction The valid range is any number above zero to 10.0. The default is 1.6.
user-scalable yes or no This determines whether the user can zoom the display in and out. The default is yes