What Exactly are Media Queries?

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: the media query.

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;} }

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.