CSS Media Queries

Media Queries allow us to apply certain styles to a document if certain conditions are true. The most common conditions to ‘query’ are the width of your browser window. Other things you can query are things like orientation of a device.

Here is what a media query looks like

@media (a query) {
    h1 {
        color: red;
    }
}

@media (min-width: 400px) {
    h1 {
        color: red;
    }
}

@media (a query) and (a query) and (a query){
    h1 {
        color: red;
    }
}

@media (min-width: 400px) and (max-width: 700px) {
    h1 {
        color: red;
    }
}

@media screen and (min-width: 400px) and (max-width: 700px) {
    h1 {
        color: red;
    }
}

It may be confusing to understand how min and max width work. Lets look at an example

If we only give this media query min-width, its going to ask, is the browser a minimum of 400px wide or higher?

@media (min-width: 400px) {
    h1 {
        color: red;
    }
}

This media query is asking, is the browser width 400px wide or lower?

@media (max-width: 400px) {
    h1 {
        color: red;
    }
}