Hands-On Data Structures and Algorithms with JavaScript

Defining the media queries in an ascending order

Defining media queries is another area which gets confusing as the size of the application grows. When defining the media queries, always define them in an increasing order so that you can isolate your styles and leave an open upper bound, as follows:

...Mobile specific styles...// if screen size is greater than a small mobile phone@media only screen and (min-width : 320px) {     // overrides which apply} // if screen size is greater than a small mobile phone in portrait mode// or if screen size is that of a tablet@media only screen and (min-width : 480px) {     // overrides that apply } // if screen size is greater than a tablet@media only screen and (min-width : 768px) {  // overrides that apply ...