CSS3 Media Queries & Transitions

by Joshua McNeese

HTML

<span>resize me</span>

CSS

@media screen and (max-width: 299px) {
    /*page <= 299px, less than 300*/
    body {
        background-color: red;
    }
    span {
        color: #fff;
        font-size: 1em;
        bottom: 10px;
        left: 10px;
    }
}
@media screen and (min-width: 300px) and (max-width: 399px) {
    /*page is 300 to 399px*/
    body {
        background-color: yellow;
    }
    span {
        color: #000;
        font-size: 1em;
        bottom: 10px;
        right: 10px;
    }
}
@media screen and (min-width: 400px) and (max-width: 499px) {
    /*page is 400 to 499px*/
    body {
        background-color: green;
    }
    span {
        color: #fff;
        font-size: 2em;
        top: 10px;
        right: 10px;
    }
}
@media screen and (min-width: 500px) {
    /*page >= 500 px*/
    body {
        background-color: blue;
    }
    span {
        color: #fff;
        font-size: 3em;
        top: 10px;
        left: 10px;
    }
}
body {
    transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -webkit-transition:all 1s linear;
}
span {
    position: absolute;
    font-weight:bold;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}