For your responsive web designing pleasure, I’ve put together a little CSS3 Media Query Reporter.

UPDATES

Get the latest version on github

Media Query Reporter on Github

• Version 1.01: includes 320px through 1440px in increments of 160px

Ruby Gem!

Christopher Moeller has created a ruby gem to add the latest version of the Media Query Reporter to your Rails App.

Original code below

Get the latest at Github.

/* ======================================

    Media Query Reporter Styles
      by David Cochran
      aLittleCode.com

========================================= */

body:after {
    content: "less than 320px";
    font-size: 200%;
    line-height: 1;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
    z-index: 9999;
}
@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 to 1360px";
        background-color: hsla(360,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1360px) {
    body:after {
        content: "1360 and up";
        background-color: hsla(90,60%,40%,0.7);
    }
}

Live Demo

See a live demo of a previous version of this little CSS3 Media Query Reporter in action over at Webdesigntuts+

Online Tutorial

For a quick tutorial on the rationale and process of building this — as well as the first steps toward creating a responsive grid system — see my tutorial at Webdesigntuts+.