Optimal Responsive CSS Media Queries

We recently upgraded our site to 3.7. I have a couple of questions regarding the Media Queries in the styles.css stylesheet. I'm no expert on how these should be set up so I'm looking for a little bit of insight.

The stock queries are as follows.

@media all and (min-width: 1001px)
@media all and (min-width: 1367px)
@media all and (max-width: 1000px)
@media all and (min-width: 481px)
@media all and (min-width: 769px)

Being set up this way, there is overlap where multiple queries can be in play at a given screen width.

What if you were to set them up similar to this way (below), where there is a clear starting and stopping point for every query? Is this okay and is it better or worse and for what reasons?

@media screen and (max-width: 940px) and (min-width: 769px)
@media screen and (max-width: 768px) and (min-width: 481px)
@media screen and (max-width: 480px) and (min-width: 360px)
@media screen and (max-width: 359px)

Also, on our 3.5 site we had a responsive.css for these queries and now on 3.7 they're contained within the styles.css. Is there a reason for this? It seemed to be much more user friendly and helped eliminate accidental changes within the queries when all responsive css was contained in it's own stylesheet (responsive.css).

Any help is greatly appreciated! Thank you.

Hello,

the overlapping of the media query ranges is intentional, because it is the "mobile first" approach used there, which is additive (in contrast with the "desktop first" approach which is subtractive)

So if you change the default ranges of the media queries you will have to adapt most of the css code for the new ranges you plan to implement. I don't believe this is a good idea at all, for example you have to multiply the "mobile-only" css which is now applied to any resolutions below 1001px and copy it several times to make it available to all the new ranges. Why would you want to add the same css several times, when you can have it added just once?

As for the old "responsive" css file, this was removed since it is quite an outdated approach. The sites novadays are not meant to behave as 2 separate sites for mobile devices and desktop devices. They should behave as a single site which is "responding" to devices screen width and height.

Regards
/ Hristo

Awesome explanation of this. Thanks for the information and the prompt response.