css media queries

very simple demo

by Nate Balcom

HTML

<h1>resize me</h1>

CSS

@media screen and (max-width: 299px) { /*page <= 299px, less than 300*/
    body {
        background-color: #ff0;
    }
}

@media screen and (min-width: 300px) and (max-width: 399px) { /*page is 300 to 399px*/
    body {
        background-color: #f00;
    }
}

@media screen and (min-width: 400px) and (max-width: 499px) { /*page is 400 to 499px*/
    body {
        background-color: #0f0;
    }
}

@media screen and (min-width: 500px) { /*page >= 500 px*/
    body {
        background-color: #00f;
    }
}

h1 { font: normal normal bold 24pt Verdana; color: #fff; text-shadow: #000 1px 1px 0px; }