css - 最大宽度与最小宽度

Question

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

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

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

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

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

Answer 1

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 像素或更小的任何设备的特定自定义导航:

您可以将其作为单独的最大宽度查询包括在内，如果那是该规则的唯一异常(exception)情况。或者使用该样式作为基准，然后将其更改为更宽的屏幕。

如果你做一个异常(exception)(这并没有真正遵循移动优先的设计方法)，它会是这样的:

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...