Why does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
- by Sam
First off, I understand the basic principles behind mobile first responsive web design, and totally agree with them. But one thing I don't understand:
In my experience, not all styles for small screens can be used for the larger version of a website. For example, usually smaller versions tend to have larger clickable areas, hamburger navigation, etc. So I sometimes have to override these specific styles, aside from just progressively enhancing the base styles.
So I was wondering: why is max-width rarely mentioned (or used) in the context of mobile-first responsive web design? Because it looks like it could be used to isolate styles for smaller screens that are not useful for larger screens, and would thus prevent unnecessary duplication of code.
A quote which mentions min-width as typically mobile-first, but not max-width:
Mobile first, from a coding perspective, means that your base style is
typically a single-column, fully-fluid layout. You use @media
(min-width: whatever) to add a grid-based layout on top of that.
from: http://gomakethings.com/mobile-first-and-internet-explorer/
EDIT: So to be more specific: I was wondering if there is a reason to exclude max-width from a mobile-first responsive design (as it seems like it can be useful for writing your css as DRY as possible, as some styles for small screens will not be used for bigger screens).
