Test page for CSS media queries and min-width 


<div id="testcontent">
This is my favorite website. I visit it almost every day. It’s not responsive. It’s not optimized for iPhone. It looks blurry on a Retina display. It doesn’t use the latest HTML5/CSS3 framework. It doesn’t have a thoughtful vertical rhythm. The fonts are nothing special. It is neither skeumorphic nor flat. It doesn’t have its own favicon. It doesn’t have a native app or Twitter or Instagram. It doesn’t use AJAX or SCRUM or node.js or Sinatra. It doesn’t have an API or an RSS feed or VC funding. It hasn’t been featured on a prominent tech blog or won an award.

It tells me the soups of the day.

Freely distributed information that’s relevant to the person reading it. That’s web design.
</div>


br. created a "testcontent" CSS id style, used in the above block of text.


/* testing for resizing desktop/laptop browser */
# testcontent {
    font-size: .7em;
    background: grey;
}

@media all and (min-width: 200px) {
    # testcontent {
        font-size: .8em;
        background: red;
    }
}

@media all and (min-width: 400px) {
    # testcontent {
        font-size: .9em;
        background: orange;
    }
}

@media all and (min-width: 600px) {
    # testcontent {
        font-size: 1em;
        background: yellow;
    }
}

@media all and (min-width: 800px) {
    # testcontent {
        font-size: 1.05em;
        background: green;
    }
}

@media all and (min-width: 1000px) {
    # testcontent {
        font-size: 1.1em;
        background: blue;
    }
}