HTML and CSS Reference
In-Depth Information
keyword to negate a media description (or media type) such as in the
following example of targeting any nonscreen media type:
<link type=”text/css” media=”
not screen
” src=”alternate.css”>
The
only
keyword does not logically impact the result of the media query
expression; however, it creates a value for the
media
attribute so that
browsers that do not support media queries cannot parse into a common
media type they support and thus can be used to hide styles from these
browsers.
The following is a list of media features for which you can specify in a
media query expression.
Since the chances that you will have declared the precise viewport width,
measured to the pixel (or ems or other
<length>
unit), is quite slim, you
can specify the
width
feature as a
min-width
or
max-width
. This holds
true of the other features where specified.
■
width
: The width of the viewport or page box; accepts
min-
and
max-
prefixes.
■
height
: The height of the viewport or page box; accepts
min-
and
max-
prefixes.
■
device-width
: The full width of the device screen or printed page;
accepts
min-
and
max-
prefixes.
■
device-height
: The full height of the device screen or printed page;
accepts
min-
and
max-
prefixes.
■
orientation
: Matches the keyword
landscape
when the width is
greater than the height;
portrait
when the height is greater than
the width.
