Why does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
Posted
by
Sam
on Stack Overflow
See other posts from Stack Overflow
or by Sam
Published on 2013-10-19T23:20:34Z
Indexed on
2013/10/22
9:55 UTC
Read the original article
Hit count: 207
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).
© Stack Overflow or respective owner