Question

I have been working for a while now with responsive design, and twitter’s bootstrap seems to be one of the best responsive frameworks.

But I have a question regarding the media queries. I see in their documentation the following :

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

And as I’m already testing it, between the 979px and 1200px the layout has no styles so everything will be messed up. So I don’t understand the logic in there, could someone explain me please ?

Answer 1

It is supposed that width between 980px an 1199px is default and don’t uses special media queries. So, you define all your styles for that width and after that, you justify your styles for other, “non-standard”, screens.