HTML and CSS Reference
In-Depth Information
figure 8-51
Media features
Feature
Description
aspect-ratio
The ratio of the width of the display area to the height of the display
color
The number of bits per color component of the output device; if the device
does not support color, the value is 0
color-index
The number of colors supported by the output device
device-aspect-ratio
The ratio of the
device-width
value to the
device-height
value
device-height
The height of the rendering surface of the output device: for continuous
media, this is the height of the screen; for paged media, this is the height
of the page
The width of the rendering surface of the output device: for continuous
media, this is the width of the screen; for paged media, this is the width of
the page
device-width
grid
Whether the output device employs a grid or a bitmap: if the output
device uses a grid (as in a TTY terminal or a phone display with only one
fixed font), the value is 1; otherwise, the value is 0
height
The height of the display area of the output device: for continuous media,
this is the height of the browser window including the scroll bars; for
paged media, this is the height of the page box
The number of bits per pixel in the device's monochrome frame buffer
monochrome
orientation
The general description of the aspect ratio: equal to
portrait
when the
height of the display area is greater than the width; equal to
landscape
otherwise
resolution
The resolution of the output device in pixels, expressed in either dpi (dots
per inch) or dpcm (dots per centimeter)
The scanning process used by the device; equal to either
progressive
or
interlace
scan
width
The width of the display area of the output device: for continuous media,
this is the width of the browser window including the scroll bars; for paged
media, this is the width of the page box
Each feature is entered into a media query using the format
(
feature
:
value
)
where
feature
is the name of a media feature, and
value
is the value that must be
matched before the browser can load the style sheet or apply a group of styles to the
page. For example, the following
link
element loads the
screen1.css
style sheet file only
when the output device is a screen and the screen width is equal to 320 pixels:
<link href=”screen1.css” rel=”stylesheet”
media=”screen and (device-width: 320px)” />
All of the media features in Figure 8-51 with the exception of the
grid
,
orientation
,
and
scan
features also accept the
min-
and
max-
prefixes, where
min-
expresses a range
that is greater than or equal to the specified value, and
max-
indicates a range that is less
than or equal to the value provided. Thus, the following
@media
rule applies the enclosed
styles only when the output device is a screen and the width of the viewport is at most
700 pixels:
@media screen and (max-width: 700px) {
styles
}
