Media Queries for Responsive Web Design

Breaking Down Media Queries for Responsive Web Design

There are two ways to call a media query: using an external stylesheet, or writing directly inside a stylesheet.

External Call

1 <link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="css/mobile.css" />

CSS Direct Call

1 @media screen and (min-width:320px) and (max-width:480px){
2
3 /*Style Declarations For This Width Range */
4
5 }

What’s Being Called Here

The two code snippets above are both examples of two different ways to make CSS declarations that only are to be called when the viewing device is between 320px and 480px. A good idea of use for either one of these declaration parameters is for calling styles for mobile that would break outside of this range. For instance loading certain styles for devices similar in width to iPhones, but making them to be ignored by certain Blackberry devices. Since we already have a general understanding of what media query is, let’s now proceed to breaking it down. For the remainder of this article, we will only be referring to the media query call used directly inside the CSS file.

@media screen

For those unfamiliar with the media attribute, it is used to separate what styles are called for different media types. Commonly used types are print, speech, projection, braille, and all. Despite the usefulness of each media type, for RWD our focus shall be geared toward the screen type. By definition the screen value is intended primarily for color computer screens, and is the default value for CSS. This call to media type is how you start the query and later call on your parameters.

Examples:

A call to set the body background to red for computer screens

1 @media screen{
2
3 body{background: #ff0000;}
4
5 }

A call to set the body background to white for print

1 @media print{
2
3 body{background: #fff;}
4
5 }

The Width Parameters

Now its time to take a look at what makes our websites responsive, the width parameters. If you’ve been following along you’ll realize that @media screen is what starts our query, and the min and max width attributes set the parameters. So with this in mind, you know how to call different style declarations for different viewing widths. Like in our example from earlier, we set the min and max width to 320px and 480px respectively. This means that anytime the viewing device is at a width between these two parameters the declarations set in the query are called.

Difference between device-width and width

Sometimes you’ll see developers making calls to device-width or width. The difference between these two here is that device width is going by the set width of your device, with any zoom type changes being ignored.

Example:

1 @media screen and (min-device-width:320px) and (max-device-width:480px){
2
3 /*Style Declarations For This Width Range */
4
5 aside{display:none;}
6
7 }

About The Author

Diseñadora grafica / Desarrolladora web / wordpress themes y mas

No Comments