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.

Answer 1

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.

Here’s a quick example:

// This applies from 600px onwards
body {
  background: green;
}

// This applies from 0px to 600px
@media (max-width: 600px) {
  body {
    background: red;
  }
}

will have a background colour of green for all widths. If the screen goes below 600px, the background colour becomes red instead.