Responsive Web Design Tutorial for Media Queries

| September 17, 2012 | Reply

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

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. This responsive web design tutorial shows  that there are two ways to call a media query: using an external stylesheet, or writing directly inside a stylesheet.

Read more at | Breaking Down Media Queries for Responsive Web Design

  • more Responsive Web Design Tutorial for Media Queries

    Related posts:

    Responsive Web Design Tutorial
    Responsive Web Design Tutorial

    Tags: , , , , , , , , , , , , , ,

    Category: Tutorials

    About the Author ()

    Sara is a Kent State University alumna with a degree in public relations.

    Leave a Reply