Why doesn't the first responsive mobile design typically use maximum width queries along with minimum width queries?

Question

Firstly, I understand the basic principles associated with the first responsive mobile web design, and completely agree with them. But one thing I do not understand:

In my experience, not all styles for small screens can be used for a larger version of a website. For example, usually smaller versions have wider interactive areas, hamburger navigation , etc. Therefore, I sometimes have to redefine these specific styles, except as only a gradual improvement in the basic styles.

So, I was wondering: why is max-width rarely mentioned (or used) in the context of mobile, which is primarily responsible for web design? Because it looks like it can be used along with minimal width to isolate styles for smaller screens that are not useful for large screens, and thus prevent unnecessary code duplication.

---

A quote that mentions the minimum width as usual for mobile devices is at first, but not for max-width:

With this in mind, which media query is best suited for the “mobile first” methodology? Assuming we want to create a mobile / small screen layout, and then expand the style for large browsers, and let there be a minimum width ... An alternative is to create a site for a desktop browser, using max-width, instead, to apply new CSS as reduce device width. But this contradicts the “mobile first” approach

from: http://petegale.com/blog/css-media-queries-min-width-vs-max-width/

---

EDIT: Therefore, to be more specific: I was wondering if there was a reason to exclude the maximum width from responsive design for mobile devices (since it seems like it could be useful to write your css as DRY as possible, as some styles are for small screens will not be used for large screens).

Answer 1

I'm not sure if this post is a comment or answer, but I totally agree that max-width too often ignored or even looks down, and would like to introduce my two cents on the topic.

For most media queries, min-width is without a doubt the best approach. The usual float scenario where you rarely want floating elements to be on a thin screen, but still want them to float on large screens, so you just add a float request through min-width .

Generalized, the reasoning is that it is better to add something when necessary, and not delete it when it is not.

Since you almost always add more CSS to larger screens, and not vice versa, people feel like people are limited to min-width media queries.

But what about the scenarios when you really add CSS, which is exclusive to the smaller screen?

Maybe you want to replace the text with an icon and do it using pseudo-elements, maybe you are making layout changes using CSS for small screens. You may need to change some colors or add margin / padding to a smaller screen.

It doesn’t matter much, the fact is that sometimes you want to add something to a smaller screen, which should not be present on the big screen. So, in accordance with the previously stated reasoning, in these scenarios it makes sense to use max-width instead of min-width .

Answer 2

max-width is rarely mentioned and is widely used to develop adaptive models for handheld devices. I prefer to use max-device-width more often. There is no generalization in understanding to use max-width rarely.

You can check various media queries (often used) for various mobile devices: http://nmsdvid.com/snippets/

For iPhone: http://www.stephentgilbert.com/mediaqueries/

To be more confident in my projects, I sometimes use the media type as a pocket type.

Hello

Answer 3

The first mobile responsive design is a philosophy, an idea, a goal. How you achieve this goal is open to interpretation.

Using one or the other method is simply tricky. In the end, you want to use a “system” that is understandable. The more parameters you use in the design of your system, the more difficult it will be to debug.

There is no real difference between using max-width and min-width queries, apart from the obvious different thinking strains they require. Using only one or the other is just KISS choice;)

No one forces you to do the same, but I also advise you to KISS.

Of course, if you need it, add it, but some fluctuations will never be bad. Take the time to evaluate your options and see what interferes with the difficulty scale, usually this is the best option.