Breaking Down Media Queries

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.

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. 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.