HTML and CSS Reference
In-Depth Information
Support
max/min Allowed Values
Media Query
Description
Example(s)
Determines if output is
monochrome and how
many bits are used for
gray display. A value of
0 indicates the output
is not monochrome.
A presence value or 1
is used to indicate the
device is displaying in
monochrome.
Yes
0 or positive integer
monochrome
@media screen
and (monochrome)
{ ... }
@media screen
and (min-
monochrome: 4)
{ ... }
orientation
Output style portrait
if height is greater
than or equal to width,
landscape if the
opposite.
No
portrait
|
landscape
@media print and
(orientation:
landscape)
{ ... }
Describes the
resolution of the
output device.
Yes
Lengths in
dpi
(dots
per inch) or
dpcm
(dots
per centimeter)
resolution
@media print and
(resolution:
300dpi) { ... }
Describes the
scanning method of
a TV.
No
progressive
|
interlaced
scan
@media tv
and (scan:
progressive)
{ ... }
Describes the current
supported width of
the device's viewport
or paged media box
in the case of print
output.
Yes
Typical CSS length units
like
px
,
em
,
in
, and
so on
width
@media screen
and (width:
1000px) { ... }
@media screen
and (min-width:
300px) and (max-
width: 480px)
{ ... }
T
ABLE
6-6 CSS Media Query Values (continued)
It is also possible to set selection of a particular downloadable font when a particular font
characteristic like bold or italic is set by adding the corresponding rule to the
@font-face
rule:
@font-face {font-family: "Mufferaw"; src: url(MUFFERAW.ttf);}
@font-face {font-family: "Mufferaw"; src: url(MUFFERAWBOLD.ttf);
font-weight: bold;}
p {font-family: "Mufferaw", serif; font-size: 5em;}
em {font-weight: bold;} /* would specify the mufferawbold font */
There are even more characteristics that can be set, including what character sets are
supported, but so far quirks abound even in basic syntax. Readers are particularly warned