Max-Width vs. Min-Width

Solution 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...

Solution 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.

Solution 3:

In short, min-width is a mobile 1st approach, max-width is a desktop 1st approach.

Min-width is the minimum width at which a style will START to be applied. (Have to be ordered from smallest to largest to work properly, regular styles first). Put another way: If device width is greater than or equal to..., then apply some specific styles. With min-width, styles START and continue forever as long as min-width is met, and no max-width is specified.

Max-width is the maximum width at which a style will continue to be applied. After that, the style will STOP being applied. (Have to be ordered from largest to smallest to work properly, regular styles first). Put another way: If device width is less than or equal to..., then apply specific styles. Styles STOP as soon as width greater than max-width is hit.

Finally, It depends on how you want to implement. There is no ONE RIGHT solution as some may claim. In my opinion min-width works great when starting from scratch, but max-width often makes more sense to me when retrofitting an existing web site.

Solution 4:

Because you're developing a website starting with a mobile design and increasing complexity with resolution, I would advise going with min-width because that follows the same work pattern.

Technically, min-width is "mobile first" in the sense that you generally begin developing for mobile and add more complexity as the resolution increases.

However, the term gained popularity more so over its alternative meaning which has generally come to imply more about an increase of focus on mobile efforts and prioritization (mostly fueled by clients or management that don't understand the technical inference). That is likely why you end up seeing a lot of min-width examples online (trendy bloggers writing about trendy topics).

When I work with complex desktop designs, I personally find it easier to write max-width queries to "simplify the equation" so-to-speak. But using max-width queries does not prevent you from focusing on mobile and can still completely be a part of a "mobile first" strategy.

In either case, the most important thing is consistency. Use one and stick to it for that project. A project can become very confusing if it uses both.

As a final note, using less queries when possible is ideal. This can be achieved through good responsive design.

Solution 5:

What are Mobile-first and Desktop-first approaches?

A mobile-first approach to styling means that styles are applied first to mobile devices. Advanced styles and other overrides for larger screens are then added into the stylesheet via media queries.

This approach uses

min-width

media queries.

Here’s a quick example:

// This applies from 0px to 600px
body {
  background: red;
}

// This applies from 600px onwards
@media (min-width: 600px) {
  body {
    background: green;
  }
}

In the example above, will have a red background below 600px. Its background changes to green at 600px and beyond.

On the flipside, a desktop-first approach to styling means that styles are applied first to desktop devices. Advanced styles and overrides for smaller screens are then added into the stylesheet via media queries. This approach uses >max-width media queries.