Putting it All Together - HTML5 with CSS3 - page 391

device's orientation (portrait or landscape, for handheld smartphones and tablets). It's a logical expression
that is either true or false, testing if the user-agent meets the conditions of the query.
In CSS, a media query is part of an @media rule—another one of those special at-rules like @font-face —
comprising a media type, a logical operator, and the features the query is testing for, enclosed in
parentheses. Targeted style rules are then nested inside that @media rule and a browser will only apply
them if it meets the query's conditions. For example, this bit of CSS:
@media screen and (min-width: 1000px) {
body { width: 960px; }
}
sets the width of the body element to 960 pixels, but only for screened media (desktop and laptop
computers, as well as most smartphones and tablets) and only if the browser's viewport is at least 1000
pixels wide. Narrower windows, devices with small screens, or user-agents for other media types such as
printers will simply ignore the nested body rule because they don't meet the query's conditions.
Logical operators in a media query use the keywords and , not , and only . The not operator negates the
result of the query so the enclosed rules would apply whenever the user-agent does not meet the query
conditions. The and operator is more common, applying the rules when the user-agent does meet the
conditions. An only operator can effectively hide a style sheet from older browsers that don't support
media queries, since only browsers that support the query will be able to interpret it.
You can also string together multiple conditions with operators to form one media query that resolves as
true if all the conditions are met:
@media screen and (min-width: 640px) and (max-width: 980px) {
...
}
And you can include multiple queries in a single rule, separated by commas, roughly equivalent to an or
operator:
@media screen and (min-width: 860px), print and (min-width: 8.5in) {
...
}
There are only a handful of media features you can use in a media query, though most of them also accept
minimum or maximum values with a min- or max- prefix:
 width : the width of the viewport, that is, the browser window, expressed as a length in any unit
(pixels, ems, inches, and so on).
 height : the height of the viewport.
 device-width : the width of the display device, that is, the entire screen width, not just the
browser window.
 device-height : the height of the display device.
 aspect-ratio : the ratio of the viewport's width over its height, such as 4:3 or 16:9, written as
4/3 or 16/9 because the colon ( : ) already has a different meaning in CSS.