A Little CSS3 Media Query Reporter

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

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

6 thoughts on “A Little CSS3 Media Query Reporter”

1. Hi David!

   Thanks for this reporter! It is a really cool tool. Though I’m more of a developer than I designer, there are times that I have to do basic designs and it helps me with creating responsive sites.

   I decided to make ruby gem of your reporter and plan to post the code on Github when it’s done. Before doing that, however, I want your permission to do so. The purpose of the gem is to make it easy to install your CSS3 Media Query Reporter in a Rails application (and maybe expand it to more frameworks later on) without having to copy files and manually modify the layout files.

   Also, I noticed when the body element has a margin greater than 0 (body { margin: 0; } is not set), the banner across the bottom of the browser applies the same margin. Is there a way that you can think of that I can apply the negative margin if I need to in just CSS? The only thing I can think of is to use JavaScript, but I’m trying to avoid that.

   Thanks!

   Christopher

2. Chris,
   Thanks for your note and your query about this. Sounds good … but let me put my original CSS in my own github repository first, and then we can look to it as the main repository for the CSS.

   Hadn’t thought about body margin, but it’s something others will undoubtedly run into. Strikes me as an interesting challenge. I’ll chew on it and play with it. BUT I’m very interested in others’ contributions!

   I’ll update when I get this in Github.

3. My v. 1.0 of this little CSS3 Media Query Reporter is now on Github
   https://github.com/davidcochran/CSS3-Media-Query-Reporter

4. David,

   Here’s a link to my repo on GitHub: https://github.com/cmoel/mq_reporter.

   When adding the gem to your rails project and installing it, you can run a terminal command which downloads and installs the latest version of your Media Query Reporter.

   I’d love to know your thoughts.

   Thanks again for a great tool and your willingness to work with me on this project!

   Christopher

5. Very slick. Thanks Christopher!

6. I love this, very handy, thanks a lot!