Does the order of media queries matter?

Hi Luke,

In your particular case I don't think the order will matter because you are using both min-width and max-width and there's no overlap between any of your media queries. So I don't think you'll have a situation where more than one media query takes effect at one time. For maintenance and readability reasons you should have them in a general increasing or decreasing order though. Even if you could put them out of order.

You should have some css outside of any media query because if the device doesn't support media queries, like older versions of IE, then you're not going to get any css applied.

In general, if you were taking a mobile first approach you would have all your site wide css and the css for small layouts at the beginning before any media queries. Then have media queries setup for increasingly wider widths where new styles will take effect.

Also, you don't necessarily need to use both min-width and max-width together. It depends on how you have your css setup and whether you want properties to carry over from one media query to another.

For example, if you had some styles that you wanted to apply for both "Mobile - Landscape" and "Table - iPad" you would have to repeat them in both media queries because only one is going to be active at any given width.

This is a contrived example but suppose you wanted paragraphs to be "red" in both of those media queries. You would have to do this:

/* Mobile - Landscape */ @media only screen and (min-width: 480px) and (max-width: 599px) {
  p {
    color: red;
  }
}

/* Tablet - iPad */ @media only screen and (min-width: 600px) and (max-width: 959px) {
  p {
    color: red;
  }
}

Whereas if you remove the max-width restriction then styles from "mobile - Landscape" can carry over and you can do this:

/* Mobile - Landscape */ @media only screen and (min-width: 480px) {
  p {
    color: red;
  }
}

/* Tablet - iPad */ @media only screen and (min-width: 600px) {
  /* Override any styles from Mobile - Landscape that you no longer wish to have here.  The rest will carry over */
  /* Add new styles here that are specific to this breakpoint */
}

The color of paragraphs will still remain red beyond 599px because both media queries are applied.

So it's probably a matter of personal preference and how you like to work but I'd say to do it in a way where you're not repeating css.