Databases
StackOverflow2013
Postsdbo
POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
    text
    copied!<p>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:</p> <p>In my experience, not <em>all</em> 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, <a href="https://ux.stackexchange.com/questions/32877/what-is-this-side-menu-called-that-can-be-found-in-many-multi-touch-apps-and-wh">hamburger navigation</a>, etc. So I sometimes have to override these specific styles, aside from just progressively enhancing the base styles.</p> <p>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 together with min-width to isolate styles for smaller screens that are not useful for larger screens, and would thus prevent unnecessary duplication of code.</p> <hr> <p>A quote which mentions min-width as typically mobile-first, but not max-width:</p> <blockquote> <p>With that in mind, which media query best fits with the “mobile first” methodology? Assuming we want to build a mobile / small screen layout, and then expand on the styling for larger browsers, it’d be min-width ... The alternative is styling the site for a desktop browser, using max-width queries instead to apply new CSS as device width decreases. But that’s contrary to the “mobile first” approach</p> </blockquote> <p><em>from: <a href="http://petegale.com/blog/css-media-queries-min-width-vs-max-width/" rel="nofollow noreferrer">http://petegale.com/blog/css-media-queries-min-width-vs-max-width/</a></em></p> <hr> <p>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).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload