html - 为什么移动优先响应式设计倾向于不使用最大宽度查询和最小宽度查询？

Question

首先，我了解移动优先响应式网页设计背后的基本原则，并且完全同意这些原则。但有一件事我不明白:

根据我的经验，并非所有适用于小屏幕的样式都可以用于较大版本的网站。例如，通常较小的版本往往具有较大的可点击区域，hamburger navigation等。因此，除了逐步增强基本样式之外，我有时不得不覆盖这些特定样式。

所以我想知道:为什么在移动优先响应式网页设计的上下文中很少提及(或使用)max-width？因为看起来它可以与 min-width 一起使用，以隔离对大屏幕无用的小屏幕样式，从而防止不必要的代码重复。

---

提到最小宽度通常是移动优先但不是最大宽度的引用:

With that in mind, which media query best fits with the “mobile first” methodology? Assuming we want to build a mobile / small screen layout, and then expand on the styling for larger browsers, it’d be min-width ... The alternative is styling the site for a desktop browser, using max-width queries instead to apply new CSS as device width decreases. But that’s contrary to the “mobile first” approach

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

---

编辑:更具体地说:我想知道是否有理由从移动优先响应式设计中排除 max-width (因为看起来它可能有助于将您的 css 编写得尽可能干燥，因为一些适用于小屏幕的样式不会用于大屏幕)。

Answer 1

我不确定这篇文章是评论还是回答，但我完全同意 max-width 经常被忽略甚至被看不起，我想展示我对这个话题的两分钱。

对于大多数媒体查询，min-width 无疑是最好的方法。一个常见的场景是 float，您很少希望在窄屏幕上 float 元素，但仍希望它们在较大的屏幕上 float ，因此您只需通过 添加 float >最小宽度 媒体查询。

一般来说，原因是最好在需要时添加一些东西，而不是在不需要时将其删除。

由于您几乎总是向大屏幕添加更多 CSS，而不是相反，因此人们将自己限制在 min-width 媒体查询上是有道理的。

但是当您实际确实添加专用于较小屏幕的 CSS 时，情况又如何呢？

也许您想用图标替换文本并且必须通过伪元素来完成，也许您正在使用 CSS 为小屏幕更改布局。也许您需要更改一些颜色或向较小的屏幕添加 margin/padding。

这并不重要，关键是有时您想要在小屏幕上添加一些不应该出现在大屏幕上的东西。因此，按照前面所述的推理，在这些情况下使用 max-width 而不是 min-width 是有意义的。