CSS provides a way to present documents differently, depending on the device on which they are viewed. Such conditional style rules are placed within a media rule, which consists of
@media, followed by an expression that limits the scope and a set of curly brackets that encloses the conditional style rules.
@media screen {
/* screen devices only */
}
Media Types
The media type condition, which was introduced in CSS 2, lists the following valid values, including the default value
all for targeting all device
types:all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
Unfortunately, the media type does not tell much about the device, so it is seldom used for its intended purpose. Modern smartphones, tablets, laptops, and desktop computers all identify themselves as
screen types. The main use of the media type condition today is to differentiate between onscreen and printed documents to enable more print-friendly document formatting.
/* Print only */
@media print
{
/* Hide navigation */
#navigation { display: none; }
/* Start h1 elements on a new page */
h1 { page-break-before: always; }
}
Media
rules are typically placed at the bottom of the style sheet, which allows the cascade to override the rules defined earlier. If the style sheet contains a lot of conditional rules, it might be preferable to move them to a separate style sheet that is included after the primary style sheet. The media condition can then be specified with the
media attribute on the
<link> element.
<link rel="stylesheet" media="print" href="myprint.css">
This style sheet contains the print condition, so it is applied only when the document is sent to print media. Keep in mind that browsers still download a style sheet, even if its media condition is false.
Media Queries
CSS 3 went a step.
farther by allowing media rules to target the capabilities of the device, not just its type. It introduced a wide range of media features that can be targeted, as seen in the following list. All these features, except for
orientation,
grid, and
scan, can be prefixed with
min- or
max- to define constraints.
width | height | device-width | device-height | aspect-ratio | device-aspect-ratio | resolution | orientation | color | color-index | monochrome
The most important media features, min-width and max-width, allow you to create responsive designs in which the site layout changes based on the viewport of the device’s browser.
A media query combines a media type and a condition consisting of one or more media features. For example, the rules within the following media query are applied only when viewed on screen-based media with a minimum width of 600 pixels:
@media screen and (min-width: 600px) {}
Media queries are case-insensitive, and parentheses around the condition are required. The
and operator seen here is used to combine the media type and the media feature, but it can also combine multiple media features together:
@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}
This media query.
is true if the viewing device has a max width of 500 pixels and at least a 1:1 aspect ratio (square or landscape viewport). Notice that the media type is left out here, so the rule applies to all media types.
Logical Operators
In addition to
the logical
and operator, media queries can include the logical
not and
only operators as well as the logical
or operation. The comma (
,) is used as the
or operator to separate groups of multiple queries. The following media rule is true if either the screen is at least 700 pixels wide or if the device is in landscape mode:
@media (min-width: 700px), (orientation: landscape) {}
The
not operator is used to negate an entire media query. It cannot negate an individual feature. For example, the following media rule applies only if the device screen is not 800 pixels wide:
@media not screen and (device-width: 800px) {}
The
only operator was added to hide media queries from older browsers. According to the specification, browsers that do not support media queries should interpret the following rule as being applied to the
only media type, which is invalid and thereby causes the conditional style rules to be ignored.
/* Not applied in older browsers */
@media only screen and (min-width: 600px) {}
Regrettably, IE 6-8 did not implement the specification correctly. The media query is therefore ignored even if the
only keyword is left out, instead of then applying the media rule to all screen-based devices.
/* Not applied in IE 6-8 */
@media screen and (min-width : 600px) {}
Note
that both the not and only operators require the use of an explicit media type, whereas the logical or (,) and logical and operators do not.
Support for media queries has become widespread in all major browsers. The min-width and max-width queries, for example, are supported in Chrome 1+, Firefox 3.5+, Safari 4+, Opera 8+, and IE 9+.
Testing Media Queries
It is important to test your media queries to make sure that your site looks good in as many devices as possible.
The latest web browsers all re-evaluate media queries as the browser environment is changed (when the window is resized, for example). You can therefore test how your design responds to different device dimensions just by resizing your browser window. Chrome also has a built-in toolbar for testing how your site will look on different devices. To show the device selection toolbar first bring up the Inspect window (Ctrl+Shift+I) and then click the Toggle device toolbar icon in the upper left corner (Ctrl+Shift+M).
Responsive Design Guidelines
When designing a responsive layout, it is often easiest to start with the mobile layout first and define how it looks without any media rules. As you expand the viewport, notice when this layout ceases to look good.
This is the breakpoint at which you should change the part of the layout that visually breaks or ceases to be useful. This change might include adding a second column or changing to a more advanced navigation menu. You define these breakpoints using the
min-width and
max-width media features to override styles as the viewport gets larger, as shown in the following example. Continue this method of finding breakpoints until you reach a high enough resolution. Depending on your layout, you might need to define only a few breakpoints.
@media (min-width: 800px) {
body { background: red; }
}
@media (min-width: 401px) and (max-width: 799px) {
body { background: green; }
}
@media (max-width: 400px) {
body { background: blue; }
}
