Breaking Down Media Queries for Responsive Web Design

Posted in Tips, Web Design2 years ago • Written by 4 Comments

The core of any Responsive Web Design framework is the media query. Media queries are what enable your website to call different style declarations from your stylesheets based on the current window width of the viewing device. Many of those new to Responsive Web Design, RWD, don’t spend time getting familiar with them. When there are great frameworks like The Semantic Grid System, Foundation by Zurb, and Twitter Bootstrap that let everyone just pick up and go, why would they bother? Right? Wrong! Having a skill that solely relies on code created by another is a hindrance to your career, in order to be able to say something is part of your skill set you have to understand it first. That is why for all those claiming to have an in-depth knowledge of RWD, we’ll be taking an extended look at it’s backbone: media queries.

What Is A Media Query

Image Credit: John Polacek

Like any good explanatory article, the starting point is always shedding light on the ‘what is’ factor. In RWD, a media query is a CSS declaration that is used as a parameter for when to call other style declarations based on the dimensions of the current viewing device. There are two ways to call a media query: using an external stylesheet, or writing directly inside a stylesheet.

External Call

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

CSS Direct Call


@media screen and (min-width:320px) and (max-width:480px){

/*Style Declarations For This Width Range */

}

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


@media screen{

body{background: #ff0000;}

}

A call to set the body background to white for print


@media print{

body{background: #fff;}

}

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:


@media screen and (min-device-width:320px) and (max-device-width:480px){

/*Style Declarations For This Width Range */

aside{display:none;}

}

Demo

This is initially appearing to be called the same way as the min and max width parameters. However, if you were to resize your browser there wouldn’t be any changes.

What Now?

*Image Credit: Cornybeard

You didn’t think that this little article was going to be a stand alone did you? This article should just be viewed as a quality introduction to what is going to come later on, but it was necessary to first touch on the basics. Here are some article to look forward to:

  • Understanding the Use of Break Points
  • Practical Responsive Web Design UX Tips
  • How To Decide To Go Mobile or Responsive
  • Creating a Responsive WordPress Theme
  • Creating Your Own Responsive Framework

Check out our Responsive Web Design E-Book

Here’s a video preview to help you decide!

Normally our three e-books costs $14.91 together, and our Responsive Web Design e-books is priced at $4.97. But if you act now, you can get all of our e-books for only $6! The deal ends on Wednesday! Hurry!

34 Written ArticlesWebsiteGoogle+

I code, write, and stuff at Five Alarm Interactive. Tweet me: @5alarmint.

4 Comments
  • Maidul

    Monday, September 17th, 2012 11:59

    2

    Responsive design is latest trend.
    HTML5 and CSS3 is ready to take this challenge :)

    +2
  • linaka

    Sunday, September 16th, 2012 08:14

    1

    Thanks for the article, that was a good read. Looking forward to the responsive WordPress theme one :)

    +1
  • Howards Walter

    Thursday, September 20th, 2012 03:59

    3

    In this article the author want to thought us inserting CSS body with right width and correct height.

    -3
  • sakib

    Tuesday, September 25th, 2012 06:43

    4

    It is a nice blog,I got many information from this.

    -3
  • sakib

    Tuesday, September 25th, 2012 06:43

    4

    It is a nice blog,I got many information from this.

    -3
  • Howards Walter

    Thursday, September 20th, 2012 03:59

    3

    In this article the author want to thought us inserting CSS body with right width and correct height.

    -3
  • Maidul

    Monday, September 17th, 2012 11:59

    2

    Responsive design is latest trend.
    HTML5 and CSS3 is ready to take this challenge :)

    +2
  • linaka

    Sunday, September 16th, 2012 08:14

    1

    Thanks for the article, that was a good read. Looking forward to the responsive WordPress theme one :)

    +1

Comments are closed.

54.226.148.122 - unknown - unknown - US