9

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

根据我的经验，并非所有小屏幕样式都可以用于较大版本的网站。例如，通常较小的版本往往具有较大的可点击区域、汉堡导航等。所以有时我必须覆盖这些特定样式，除了逐步增强基本样式。

所以我想知道：为什么在移动优先的响应式网页设计中很少提到（或使用）最大宽度？因为它看起来可以与 min-width 一起使用来隔离对大屏幕无用的较小屏幕的样式，从而防止不必要的代码重复。

引用 min-width 通常是移动优先，但不是 max-width：

考虑到这一点，哪种媒体查询最适合“移动优先”方法？假设我们要构建一个移动/小屏幕布局，然后为更大的浏览器扩展样式，它将是 min-width ...替代方案是为桌面浏览器设置站点样式，使用 max-width 查询代替随着设备宽度的减小应用新的 CSS。但这与“移动优先”的方法背道而驰

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

编辑：所以更具体地说：我想知道是否有理由从移动优先的响应式设计中排除 max-width （因为它似乎对于将你的 css 尽可能写为 DRY 很有用，因为某些样式用于小屏幕不会用于大屏幕）。

4

3 回答 3

12

我不确定这篇文章是评论还是答案，但我完全同意它max-width经常被忽视甚至被轻视，并想在这个话题上展示我的两分钱。

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

概括地说，推理是最好在需要时添加一些东西，而不是在不需要时删除它。

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

但是，当您确实添加了小屏幕独有的 CSS 时，情况又如何呢？

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

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

于 2013-10-22T10:35:45.810 回答
2

max-width is not rarely mentioned and is highly used for developing responsive designs for handheld devices. I do prefer to use max-device-width more frequently. There is no generalization over the understanding to use max-width rarely.

You can check various media-queries (frequently used) for various mobile devices over here: http://nmsdvid.com/snippets/

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

To be more sure about my designs, I do use media-type as handheld more occasionally.

Regards

于 2013-10-20T08:20:31.450 回答
2

移动优先响应式设计是一种哲学、一种想法、一个目标。您如何实现该目标有待解释。

使用一种或另一种技术只是与复杂性有关。最后，您要使用可以理解的“系统”。您在系统设计中使用的参数越多，调试就越困难。

使用 max-width 和 min-width 查询之间没有真正的区别，除了它们需要的明显不同的思维方式。只使用一个或另一个只是KISS的一种选择；）

没有人强迫你这样做，但我也建议你去 KISS。

当然，如果您需要它，请添加它，但犹豫不决永远不会坏。花点时间评估你的选择，看看是什么让事情的复杂性保持在低水平，这通常是更好的选择。

于 2013-10-22T10:33:52.267 回答