media query reporter

mediaqueryreport.css

/* ======================================
 
    MediaQuery-Reporter Styles
 
========================================= */
 
body:after {
    content: "less than 320px";
    font-size: 300%;
    font-weight: bold;
    position: fixed;
    bottom: 60px;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
}
@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 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}