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

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.