Targeting Styles with Media Queries - Beginning CSS3 - page 381

it's an early model, but it still works. Most desktop computers have monitors with a minimum screen
resolution of 1280 × 800 , but 1920 × 1080 and up is by no means uncommon. These wide variations make it
impossible to compartmentalize styles as being for a particular type of device.

Rather than attempting to design for specific devices, it's better to assess your content and choose resolution
break points at which your layout naturally needs to change. For example, if you have a set of images each
300px wide, the natural break points for the design might be 320px , 640px , and 980px , allowing you to
display the images side by side on wider screens. designing for natural break points avoids the need to
worry about revising your styles each time a popular new device is released.

Importing Style Sheets
Media queries can also be used with @import rules. For example, instead of linking three style sheets to every
page, as in the preceding example, you can link to just one style sheet like this:

<link href="styles/import.css" rel="stylesheet" type="text/css">

The single style sheet then imports the others like this:

@import url(basic.css);
@import url(phone.css) only screen and (max-width: 480px) ;
@import url(tablet.css) only screen and (min-width: 481px) and (max-width: 768px) ;

This approach has two potential advantages. First, you attach only one style sheet to each page. Second, if
you want to change the conditions in the media queries, there's only one page to edit.

■ using a style sheet to import other styles adds an extra server request each time a page loads.
Also, @import can affect performance. On a small site, it's not likely to make a noticeable difference, but it could
have a severe impact on larger sites. See www.stevesouders.com/blog/2009/04/09/dont-use-import/ .

Caution

Using Media Queries Inside Style Sheets
Another way to use media queries is with @media rules inside a style sheet or <style> block. The media query is
appended to @media like this:

@media only screen and (min-width: 481px) and (max-width: 768px) {
/* Styles for screen widths between 481px and 768px */
}

■ Most browsers download all style sheets, even if they don't match the conditions of the media query. So,
consolidating all styles into a single style sheet with @media rules is—in theory, at least—the most efficient way of
using media queries. The main disadvantage is that the style sheet can become very long and difficult to maintain.

Tip