Waterfall

Media Queries

Media Queries allow us to query the browser to get more information about the display properties. Each query has two components, the media type declaration and the query. The syntax looks like so for a linked stylesheet…

[crayon]

[/crayon]

and like so for an import….

[crayon]

@media screen and (min-width: 480px {

Declarations Here…

}

[/crayon]

 

Feature Testing Support

Feature Value Min/Max Description
width Length Yes Width of display area
height Length Yes Height of display area
device-width Length Yes Width of device
device-height Length Yes Height of device
orientation portrait or landscape No Orientation of device
aspect-ratio Ratio (w/h) Yes Ratio of width to height, expressed as two integers separated by a slash (e.g., 16/9)
device-aspect-ratio Ratio (w/h) 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 the 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, express as integer followed by dpi (dots per inch) or dpcm (dots per centimeter)
scan progressive or interlace No Scanning process used by TV devices
grid 0 or 1 No If set to 1, the device is grid-based, such as a teletype terminal or phone display with only one fixed font (all other devices are 0)

Examples to get you started ( via 320 and UP)

[crayon]

[/crayon]

 

Polyfills