Media Queries Sample

media.queries.css

@media screen and (min-width: 1px) and (max-width: 400px) {
    /*
    This seems like a good place for code... Make sure you change the breakpoints!
    */
    body {
        background: #ff0000;
    }
}

@media screen and (min-width: 401px) and (max-width: 599px) {
    /*
    This seems like a good place for code... Make sure you change the breakpoints!
    */
    body {
        background: #00ff00;
    }
}

@media screen and (min-width: 600px) {
    /*
    This seems like a good place for code... Make sure you change the breakpoints!
    */
    body {
        background: #0000ff
    }
}


// OR

body {
    background: #ff0000;
}

@media screen and (max-width: 400px) {
    /*
    This seems like a good place for code... Make sure you change the breakpoints!
    */
    body {
        background: #00ff00;
    }
}

@media screen and (min-width: 600px) {
    /*
    This seems like a good place for code... Make sure you change the breakpoints!
    */
    body {
        background: #0000ff
    }
}