HTML and CSS Reference
■ when you specify a width for printing, iE 9+ calculates the width remaining after deducting the
margins set in the @page rule.
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.
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,