@media queries

Best to stick to the breakpoints currently established. Otherwise,at the overlaps you’ll be substituting two or more sets of CSS with one set of replacement CSS and things are bound to go wrong. Also, at the currently-set breakpoints other things happen: menus collapse, margins get wider, etc, so you need to match them really.

Bootstrap 2.3.2 was built from the desktop down. So in terms of cascade, the desktop is the default. However, in terms of cascading, I don’t use order to define media queries. What I do instead (or try to!) is make sure that all possibly-conflicting CSS is mutually excluded by the media queries.

So, for instance, if you have some CSS that needs to behave differently at 800px and 700px, say, then don’t use @media (max-width:979px) followed by @media (max-width:767px). Instead, use @media (min-width: 768px) and (max-width: 979px) and @media (max-width:767px) in any order you like. Anything else is just too much hassle to keep track of.

Depending on what you need, these are all the possible media queries for Customizr:

@media all and (min-width: 1200px) {}
@media all and (min-width: 980px) {}
@media all and (min-width: 768px) {}
@media all and (min-width: 481px) {}
@media all and (min-width: 321px) {}

@media all and (max-width: 1119px) {}
@media all and (min-width: 980px) and (max-width: 1119px) {}
@media all and (min-width: 768px) and (max-width: 1119px) {}
@media all and (min-width: 481px) and (max-width: 1119px) {}
@media all and (min-width: 321px) and (max-width: 1119px) {}

@media all and (max-width: 979px) {}
@media all and (min-width: 768px) and (max-width: 979px) {}
@media all and (min-width: 481px) and (max-width: 979px) {}
@media all and (min-width: 321px) and (max-width: 979px) {}

@media all and (max-width: 767px) {}
@media all and (min-width: 481px) and (max-width: 767px) {}
@media all and (min-width: 321px) and (max-width: 767px) {}

@media all and (max-width: 480px) {}
@media all and (min-width: 321px) and (max-width: 480px) {}

@media all and (max-width: 320px) {}

This is also their correct order, by the way (as in, if you have selectors of the same strength in all queries they will work as expected).

However, from my personal experience, one should not need more than 5 cases for any particular page layout. I’ve managed to build responsive tables with only 4 media queries.