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.

Is this some sort of design trend, or pattern, why people are using min-width over max-width?

For example, I'm designing a site starting from mobile, working up to the desktop. I am using Foundation 4, but using media queries to remove various elements on the page and re-position the source order.

One thing I am facing is a custom navigation for any device whose width is 360px or less. I want them to have a vertical navigation, rather than an inline horizontal. So my idea was to use max-width to target these devices.

Should I be using min-width instead if I am designing mobile first? I.e. all the default styles are for mobile, and thus using min-width to progressively enhance the layout?

Answer 1

2 Part Answer

Part 1: To answer "why people are using min-width over max-width?":

It has to do with design flow. Typically, with min-width patterns, you're designing mobile-first. With max-width patterns, you're design desktop-first.

Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens.

body {     /* default styles here,         targets mobile first */ }  @media screen and (min-width:480px) {     /* style changes when the screen gets larger */ }  @media screen and (min-width:800px) {         /* And even larger */     } 

Conversely, using max-width, is desktop-first then adds queries to make styles mobile-friendly

body {         /* default styles here,             targets desktops first */     }  @media screen and (max-width:800px) {     /* style changes when the screen gets smaller */ }  @media screen and (max-width:480px) {         /* And even smaller */     } 

Part 2: For your particular custom navigation for any device who's width is 360px or less:

You could include that as a separate max-width query, IF thats the only exception to the rule. OR use that style as your baseline, then change it for wider screens.

If you do an exception (which isn't really following mobile-first design methods), it'd be something like:

body {         /* default styles here,             targets mobile first            ALSO will cover 361 - 479 width */     }  @media screen and (max-width:360px) {     /* style ONLY for screens with 360px or less width */ }  @media screen and (min-width:480px) {     /* style changes when the screen gets larger */ } etc... 

Answer 2

It really depends on how your stylesheet works. For example:

@media screen and (min-width:100px) {     body { font-weight:bold; } }  @media screen and (min-width:200px) {     body { color:#555; } } 

The above two media queries would make the body font bold if the screen is greater than or equal to 100px, but also make the color #555 if it's greater than or equal to 200px;

Another example:

@media screen and (max-width:100px) {     body { font-weight:bold; } }  @media screen and (max-width:200px) {     body { color:#555; } } 

Unlike the first example, this makes the body font bold and color #555 only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555.

The beauty of media queries is that you can combine these statements:

@media screen and (min-width:100px) and (max-width:200px) {     body { font-weight:bold; color:#555; } } 

In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.

In short, if you want your styles to leak out of media queries you'd use either min-width or max-width, but if you're wanting to affect a very specific criteria you can just combine the two.