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

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?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
      1. USCommunity
      1. VTBountyStart
    2. VO
      singulars
      1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI would say that the people writing the articles that you are reading simply did not think they needed them. There's nothing stopping you from using them though.. It's not like "mobile first" is a strict set of rules where people will find you and beat you if you don't follow them haha. I personally design desktop downwards partly because of what you are saying. (also because I tend to design websites that I would prefer people to view on a desktop display)
      singulars
      1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
      1. USBlake Mann
    2. CO@BlakeMann, haha yeah of course I understand that I can adapt the rules. It's just that I was wondering what the reason was for the strict association between mobile first and min-width, and whether there was a reason for max-width not being mentioned as a useful tool as well.
      singulars
      1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
      1. This table or related slice is empty.
    3. COBy the way, I understand that min-width is associated with mobile-first RWD because of the progressive enhancement (and thus building upon the base styles, instead of stripping them away with max-width). I was just wondering if there are reasons not to use it for the goals I mentioned in the question, aside from progressive enhancement.
      singulars
      1. POWhy does mobile first responsive design tend to not use max-width queries alongside the min-width queries?
      1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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