Question

我正在使用媒体查询阅读的大部分教程都演示了min-width的使用，但我很少看到有人使用max-width。

这是某种设计趋势或模式，为什么人们使用min-width而不是max-width？

例如，我正在设计一个从移动设备开始，一直到桌面的网站。我正在使用Foundation 4，但使用媒体查询删除页面上的各种元素并重新定位源顺序。

我面临的一件事是任何宽度为360px或更低的设备的自定义导航。我希望它们具有垂直导航，而不是内联水平。所以我的想法是使用max-width来定位这些设备。

如果我先设计手机，我应该使用min-width吗？即所有默认样式都适用于移动设备，因此使用min-width逐步增强布局？

Answer 1

这实际上取决于样式表的工作原理。例如：

@media screen and (min-width:100px) {
    body { font-weight:bold; }
}

@media screen and (min-width:200px) {
    body { color:#555; }
}

如果屏幕大于或等于100px，则上述两个媒体查询会使body字体变为粗体，但如果大于或等于，则会使颜色为#555或等于200px;

另一个例子：

@media screen and (max-width:100px) { body { font-weight:bold; } } @media screen and (max-width:200px) { body { color:#555; } }

与第一个示例不同，只有当屏幕宽度介于0和100px之间时，才会使body字体变为粗体和颜色#555。如果介于0px和200px之间，则颜色为#555。

媒体查询的美妙之处在于您可以将这些语句组合在一起：

@media screen and (min-width:100px) and (max-width:200px) { body { font-weight:bold; color:#555; } }

在此示例中，您只定位宽度介于100px和200px之间的设备 - 仅此而已，仅此而已。

简而言之，如果您希望样式泄漏超出媒体查询，您可以使用min-width 或 max-width，但如果你想要影响一个非常具体的标准，你可以将两者结合起来。

Answer 2

2部分答案

第1部分：回答＆＃34;为什么人们使用最小宽度超过最大宽度？＆＃34;

它与设计流程有关。通常，使用最小宽度模式，您可以先设计移动设备。使用最大宽度模式，您可以先设计桌面。

使用min-width进行移动优先，默认样式是移动样式。之后的查询然后逐渐增大屏幕。

body {
    /* default styles here, 
       targets mobile first */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}

@media screen and (min-width:800px) {
        /* And even larger */
    }

相反，使用max-width是桌面优先，然后添加查询以使样式适合移动设备

body {
        /* default styles here, 
           targets desktops first */
    }

@media screen and (max-width:800px) {
    /* style changes when the screen gets smaller */
}

@media screen and (max-width:480px) {
        /* And even smaller */
    }

第2部分：针对宽度为360px或更低的任何设备的特定自定义导航：

您可以将其包含为单独的最大宽度查询，IF是规则的唯一例外。或者使用该样式作为基线，然后将其更改为更宽的屏幕。

如果你做了一个例外（它不是真正遵循移动优先设计方法），它就像是：

body {
        /* default styles here, 
           targets mobile first
           ALSO will cover 361 - 479 width */
    }

@media screen and (max-width:360px) {
    /* style ONLY for screens with 360px or less width */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}
etc...

Answer 3

简而言之，min-width是移动第一种方法，max-width是桌面第一种方法。

最小宽度是样式开始应用的最小宽度。（必须从最小到最大订购才能正常工作，首先是常规款式）。换句话说：如果设备宽度大于或等于......，则应用一些特定样式。使用最小宽度，样式START，只要满足最小宽度，就会永久地继续，并且不指定最大宽度。

最大宽度是继续应用样式的最大宽度。之后，样式将停止应用。（必须从大到大排序才能正常工作，首先是常规款式）。换句话说：如果设备宽度小于或等于......，则应用特定样式。一旦宽度大于最大宽度，样式就会停止。

最后，这取决于您希望如何实施。有人可能声称没有一个正确的解决方案。在我看来，从头开始，min-width工作得很好，但在改造现有网站时，max-width对我来说更有意义。

Answer 4

因为您正在开发一个以移动设计开始并且通过分辨率增加复杂性的网站，我建议使用min-width，因为它遵循相同的工作模式。

从技术上讲，min-width是“移动优先”，因为您通常会开始针对移动设备进行开发，并随着分辨率的提高而增加复杂性。

然而，这一术语在其替代意义上更受欢迎，这通常意味着更多地关注对移动工作和优先级的关注（主要是由不了解技术推断的客户或管理层推动）。这可能就是为什么你最终会在网上看到很多min-width例子（时髦的博客写下时髦主题）。

当我使用复杂的桌面设计时，我个人觉得更容易编写max-width个查询来“简化方程式”。但使用max-width查询并不会阻止您专注于移动设备，并且仍然可以完全成为“移动优先”策略的一部分。

在任何一种情况下，最重要的是一致性。使用一个并坚持它为该项目。如果项目同时使用，项目可能会变得非常混乱。

最后请注意，尽可能少使用查询是理想的选择。这可以通过良好的响应式设计来实现。

Answer 5

我首先是一个没有响应的网站，专为桌面设计。然后通过添加max-width媒体查询添加响应性。

我的网站现在具有320px，480px，768px，960px和1024px等广泛设备的布局，因此我添加了类似max-width: 479px，max-width: 767px，{{1}的媒体查询这样工作正常 - 网站的行为应该如此。

但是，我最近发现了Chrome开发者工具＆＃34;设备模式＆＃34;有一个媒体查询工具，对我来说真的非常有用。它允许我单击以在Chrome在我的页面上找到的每个媒体查询级别显示网站。在设计响应式布局时，这对我很有帮助。

媒体查询工具使用它在媒体查询中找到的数字，即479,767,959,1023等。但这意味着，例如，如果我想看看我的布局如何用于480px宽的设备看起来，我必须点击最大宽度767px级别的媒体查询，这对我来说是非常不直观的。

这让我重新思考当前桌面优先的CSS，我将使用移动优先方法重写我的CSS。

我认为使用max-width: 959px的移动优先CSS将更具可读性，因为您将看到min-width的媒体查询，并知道这将是480px宽设备的CSS。 / p>

Answer 6

我一直在努力的大多数网站都是专为桌面设计的，在这些情况下使用max-width查询是有道理的。通常，如果您首先使用小型屏幕min-width，然后使用针对较大分辨率的媒体查询进行构建。

您当然可以混合使用最小和最大查询来获得特定的分辨率

也许请看一下使用min-device-width来解决您在导航中遇到的具体问题

Answer 7

什么是“移动优先”和“桌面优先”方法？

一种 移动优先 样式设置方法意味着样式首先应用于移动设备。然后，通过媒体查询将高级样式和大屏幕的其他替代项添加到样式表中。

此方法使用

最小宽度

媒体查询。

以下是一个简单的示例：

// This applies from 0px to 600px
body {
  background: red;
}

// This applies from 600px onwards
@media (min-width: 600px) {
  body {
    background: green;
  }
}

在上面的示例中，将在600px以下具有红色背景。其背景会变为600px及更高的绿色。

另一方面，桌面优先样式设计方法意味着样式首先应用于桌面设备。然后，通过媒体查询将高级样式和较小屏幕的替代项添加到样式表中。这种方法使用> max-width 媒体查询。

以下是一个简单的示例：

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

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

的所有宽度的背景颜色均为绿色。如果屏幕低于600像素，则背景颜色改为红色。

最大宽度与最小宽度

7 个答案: