Max-Width vs. Min-Width

Question

Most of the tutorials I\'m reading on using Media Queries are demonstrating the use of min-width, but I\'m rarely seeing people using max-width.

Answer 1

I had a unresponsive website first, designed for desktops. Then added responsiveness by adding max-width media queries.

My site now has layouts for 320px, 480px, 768px, 960px, and 1024px etc. wide devices, and so I have added media queries that look like max-width: 479px, max-width: 767px, max-width: 959px etc. This works fine - the site behaves as it should.

However, I've recently found that the Chrome Developer Tools "Device Mode" has a Media Queries Tool that is really, really useful to me. It allows me to click to display the website at each media query level that Chrome finds on my page. This is a great help to me when designing the responsive layouts.

The Media Queries Tool uses the numbers it finds in the media queries, i.e. 479, 767, 959, 1023 etc. But this means that, for example, if I want to see what how my layout for a 480px-wide device looks, I have to click the max-width 767px level media query, which to me is quite unintuitive.

This has made me rethink my current desktop-first CSS, and I will be rewriting my CSS using a mobile-first approach.

I think the mobile-first CSS using min-width will be much more readable, because you will see a media query for min-width: 480px and know that will be the CSS for a 480px-wide device.