Css 最大宽度vs.最小宽度

我正在阅读的关于使用媒体查询的大多数教程都演示了

min width

的使用，但我很少看到有人使用

max width

这是某种设计趋势或模式吗？为什么人们使用

minwidth

而不是

max width

例如，我正在设计一个从移动到桌面的网站。我正在使用基础4，但是使用媒体查询来删除页面上的各种元素并重新定位源代码顺序。 我面临的一件事是为任何宽度小于等于360px的设备定制导航。我希望他们有一个垂直导航，而不是一个内联水平。所以我的想法是使用

max width

来瞄准这些设备

---

如果我首先设计手机，我应该使用

minwidth

？也就是说，所有默认样式都适用于移动设备，因此使用

minwidth

逐步增强布局？

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

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

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

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

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

如果屏幕大于或等于100px，上述两个媒体查询将使

正文

字体加粗；如果屏幕大于或等于200px，将使颜色#555加粗

另一个例子：

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

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

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

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

与第一个示例不同，仅当屏幕宽度在0到100px之间时，才会使

主体

字体粗体和颜色

#555

。如果它在0px和200px之间，它将是颜色

#555

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

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

在本例中，您只针对宽度介于100px和200px之间的设备-不多也不少

---

简言之，如果您希望您的样式从媒体查询中泄漏出来，您可以使用

minwidth

或

max width

，但是，如果你想影响一个非常具体的标准，你可以将两者结合起来。

我工作过的大多数网站都是先为桌面设计的，在这些情况下，使用

最大宽度

查询是有意义的。通常，如果您要启动小屏幕，请首先使用

minwidth

，然后在顶部构建媒体查询，以获得更高的分辨率

当然，您可以混合使用min和max查询来获得特定的分辨率

---

对于导航的具体问题，可以使用

min device width

，2部分答案

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

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

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

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

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

它与设计流程有关。通常，使用最小宽度模式时，首先要设计移动设备。使用“最大宽度”图案，您将首先设计桌面

首先使用最小宽度移动，默认样式为移动样式。之后的查询将以逐渐增大的屏幕为目标

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 */
    }

相反，使用“最大宽度”，is desktop会先添加查询，使样式对移动设备友好

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的设备的特定自定义导航：

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

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

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

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

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

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

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

---

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

我的站点现在有320px、480px、768px、960px和1024px等宽设备的布局，因此我添加了媒体查询，看起来像

最大宽度：479px

，

最大宽度：767px

，

最大宽度：959px

等。这很好-站点的表现应该是这样的

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

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

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

---

我认为使用

minwidth

的mobile first CSS更具可读性，因为您将看到媒体查询

minwidth:480px

，并且知道这将是480px宽设备的CSS。

简言之，min width是mobile first方法，max width是桌面first方法

Min width是开始应用样式的最小宽度。（必须从最小到最大顺序订购才能正常工作，首先是常规样式）。换句话说：如果设备宽度大于或等于…，则应用某些特定样式。使用“最小宽度”，只要满足“最小宽度”且未指定“最大宽度”，样式将永远开始并继续

“最大宽度”是将继续应用样式的最大宽度。之后，样式将停止应用。（必须从大到小订购才能正常工作，首先是常规样式）。换句话说：如果设备宽度小于或等于…，则应用特定样式。当宽度大于最大宽度时，样式将立即停止

---

最后，这取决于您想要如何实现。有些人可能会说，没有一个正确的解决办法。在我看来，从零开始，min width非常有效，但在改造现有网站时，max width通常对我更有意义。

因为您正在开发一个以移动设计为起点的网站，并且随着分辨率的增加，复杂性也在增加，我建议使用

min width

，因为这会导致