最大宽度与最小宽度

Question

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

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

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

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

如果我首先设计移动设备，我应该使用min-width 代替吗？ IE。所有默认样式都是针对移动设备的，因此使用min-width 来逐步增强布局？

Answer 1

这实际上取决于您的样式表是如何工作的。例如：

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

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

如果屏幕大于或等于 100 像素，上述两个媒体查询将使 body 字体加粗，但如果大于或等于 200 像素，也会使颜色 #555 ;

另一个例子：

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

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

与第一个示例不同，只有当屏幕宽度在 0 到 100 像素之间时，body 字体才会变为粗体，#555 才会显示颜色。如果它在 0px 和 200px 之间，它将是颜色#555。

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

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

在此示例中，您仅定位宽度在 100 像素到 200 像素之间的设备 - 不多也不少。

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

Answer 2

我一直在处理的大多数网站都是首先为桌面设计的，在这些情况下使用max-width 查询是有意义的。通常，如果您开始使用小屏幕，请先使用min-width，然后在顶部使用针对更大分辨率的媒体查询。

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

也许看看使用min-device-width 来解决您在导航方面遇到的具体问题

Answer 3

2 部分答案

第 1 部分：回答“为什么人们使用最小宽度而不是最大宽度？”：

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

以最小宽度移动优先，默认样式是移动样式。之后的查询会针对逐渐变大的屏幕。

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 部分：针对宽度为 360 像素或更小的任何设备的特定自定义导航：

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

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

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 4

我首先有一个无响应的网站，专为台式机设计。然后通过添加最大宽度媒体查询来增加响应能力。

我的网站现在有 320px、480px、768px、960px 和 1024px 等宽设备的布局，所以我添加了看起来像 max-width: 479px、max-width: 767px、max-width: 959px 等的媒体查询。这很好用- 该网站的行为应有尽有。

不过，我最近发现 Chrome 开发者工具“设备模式”有一个媒体查询工具，它对我非常非常有用。它允许我单击以在 Chrome 在我的页面上找到的每个媒体查询级别显示网站。在设计响应式布局时，这对我有很大帮助。

媒体查询工具使用它在媒体查询中找到的数字，即 479、767、959、1023 等。但这意味着，例如，如果我想看看我的 480 像素宽设备的布局如何看起来，我必须点击 max-width 767px 级别的媒体查询，这对我来说很不直观。

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

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

Answer 5

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

最小宽度是开始应用样式的最小宽度。 （必须从最小到最大排序才能正常工作，首先是常规样式）。换句话说：如果设备宽度大于或等于...，则应用一些特定的样式。使用 min-width，只要满足 min-width，样式就会开始并一直持续，并且没有指定 max-width。

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

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

Answer 6

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

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

但是，该术语比它的替代含义更受欢迎，这通常意味着更多地关注移动工作和优先级（主要由不了解技术推理的客户或管理层推动）。这可能就是为什么您最终会在网上看到很多 min-width 示例（时尚博主撰写有关时尚主题的文章）。

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

无论哪种情况，最重要的是一致性。使用一个并坚持该项目。如果项目同时使用两者，它可能会变得非常混乱。

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

Answer 7

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

mobile-first 样式方法意味着样式首先应用于移动设备。然后通过媒体查询将大屏幕的高级样式和其他覆盖添加到样式表中。

这种方法使用

最小宽度

媒体查询。

这是一个简单的例子：

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

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

在上面的示例中， 将具有低于 600 像素的红色背景。它的背景在 600 像素及以上时变为绿色。

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

这是一个简单的例子：

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

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

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