HTML and CSS Reference
In-Depth Information
Applies to: bitmap (devices that output an image, such as screen or print) media types | Accepts min/max prefixes:
no
The
orientation
media feature takes two values,
portrait
and
landscape
, and is written as follows:
@media only screen and
(orientation: portrait)
@media only screen and
(orientation: landscape)
orientation
is
portrait
when the value of the
height
media feature is greater than or equal to the value of
the
width
media feature; otherwise,
orientation
is
landscape
.
aspect-ratio
Applies to: bitmap media types | Accepts min/max prefixes: yes
aspect-ratio
is the ratio between the
width
and
height
media features (the width and height of the view-
port). As with many of the media features,
aspect-ratio
tends to be used with a
min-
or
max-
prefix.
This media query describes a viewport with a width that is equal to or greater than its height:
@media only screen and
(min-aspect-ratio: 1/1)
device-aspect-ratio
Applies to: bitmap media types | Accepts min/max prefixes: yes
device-aspect-ratio
is the ratio between the
device-width
and
device-height
(the width and height
of a screen).
The following media query describes a device's screen with an aspect ratio of 16/9:
@media only screen and (device-aspect-ratio: 16/9)
color, color-index, monochrome, resolution, scan, and grid
The following media features are used for more specialized pages and applications:
•
color
—Describes the number of bits per color component of the output device
•
color-index
—Describes the number of entries in the color lookup table of the output device
•
monochrome
—Describes the number of bits per pixel in a monochrome frame buffer
•
resolution
—Describes the resolution of the output device
•
scan
—Describes the scanning process of
tv
output devices
•
grid
—Queries whether the output device is grid or bitmap
For more information on these media features, see the Media Queries module at
www.w3.org/TR/
