HTML and CSS Reference
In-Depth Information
Table 17-1.
Media Features Used to Test a Device's Capabilities
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 of
width
to
height
Ratio
Yes
device-aspect-ratio
Ratio of
device-width
to
device-height
Ratio
Yes
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 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 the output device, expressed
as an integer followed by
dpi
(dots per inch),
dpcm
(dots per centimeter), or
dppx
(dots per pixel)
scan
progressive
or
interlace
No
Scanning process used by TV device
grid
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
)
No
■
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.
Note
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.
Tip
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
.
