HTML and CSS Reference
Table 17-1. Media Features Used to Test a Device's Capabilities
Width of display area
Height of display area
Width of device
Height of device
Orientation of device
Ratio of width to height
Ratio of device-width to device-height
Number of bits per color component
(if not color, the value is 0 )
Number of entries in the device's color lookup table
Number of bits per pixel in the monochrome frame
buffer (if not monochrome, the value is 0 )
Density of pixels of the output device, expressed
as an integer followed by dpi (dots per inch), dpcm
(dots per centimeter), or dppx (dots per pixel)
Scanning process used by TV device
0 or 1
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 )
■ Ratios are expressed as two integers separated by a forward slash, for example 16/9 . The slash can
optionally be surrounded by spaces: 16 / 9 is equally valid.
The width and height values refer to the display area, whereas device-width and device-height refer to
the physical dimensions of the screen. Many mobile devices use width and height to refer to a nominal viewport
that is usually much larger than the screen's physical dimensions. You'll learn later in this chapter how to
reconcile the difference between the nominal viewport and screen size.
■ Pixel measurements refer to CSS pixels (see “Physical and CSS Pixels” in Chapter 3), even with high
pixel-density displays, such as Apple's retina display.
Media Query Syntax
A media query begins with one of the media types listed in Table 16 - 1 in the preceding chapter. The only ones
you are ever likely to need are screen or print .