HTML and CSS Reference
In-Depth Information
■
when you specify a width for printing, iE 9+ calculates the width remaining after deducting the
margins set in the
@page
rule.
Caution
Specifying Negative Conditions
You can't negate just one condition. The whole query must be negated by placing the
not
keyword at the
beginning like this:
not screen and (min-width: 769px)
This makes the styles available to every device
except
a visual browser with a minimum screen width of
769px
. So, the styles would be available, for example, to a printer or to a visual browser with a screen width of
768px
or less.
■
The
not
keyword
must
come before the media type. The query is ignored if you use it anywhere else.
For example,
screen and not (monochrome)
is invalid.
Caution
Attaching External Style Sheets
One of the most common ways of using media queries is in the
media
attribute of the
<link>
tag. You can attach a
generic style sheet to a page, followed by a series of device-specific style sheets like this:
<link href=styles/basic.css" rel="stylesheet" type="text/css">
<link href="styles/phone.css" rel="stylesheet" type="text/css"
media="only screen and
(max-width: 480px)"
>
<link href="styles/tablet.css" rel="stylesheet" type="text/css"
media="only screen and
(min-width: 481px) and (max-width: 768px)"
>
The first style sheet, basic.css, doesn't use the
media
attribute, so the styles apply to all devices. Browsers
that understand media queries also read the other style sheets. Attaching the device-specific style sheets after
the generic style sheet allows you to use the cascade to override specific styles. The styles in phone.css apply
to screens no wider than
480px
; those in tablet.css apply to screens between
481px
and
768px
wide. These
sizes are only examples. The sidebar “What Sizes Should I Design For?” discusses factors you should take into
consideration when creating media queries.
If you want to restrict the generic styles to visual browsers, add
media="screen"
without a media query to
the
<link>
tag.
What SIZeS ShOULD I DeSIGN FOr?
There are so many different web-enabled devices on the market; it's only natural that we try to break down
the complexity by slotting them into convenient categories, such as phone, tablet, and desktop. So, there's a
danger of thinking the same way about media queries: create three style sheets—one each for phone, tablet,
and desktop—and you're done.
Many smartphones, including the iPhone 4S, have a display that's
320px
wide (measured in CSS pixels). The
most popular tablet, the iPad, is
768
×
1024
. But i've got a 7-inch tablet with a
400px
screen. Admittedly,
