最大宽度与最小宽度

我正在阅读的大多数关于使用媒体查询的教程都演示了如何使用min-width，但我很少看到人们使用max-width.

这是人们使用的某种设计趋势或模式吗？min-width over max-width?

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

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

我应该使用min-width相反，如果我首先设计移动设备呢？ IE。所有默认样式均适用于移动设备，因此使用min-width逐步加强布局？

2 部分答案

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

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

使用 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 部分：对于宽度为 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...