css – 最大宽度与最小宽度

我在使用媒体查询阅读的大多数教程都在演示使用最小宽度，但我很少看到人们使用最大宽度。

这是某种设计趋势，或模式，为什么人们使用最小宽度超过最大宽度？

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

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

如果我设计移动设备，我应该使用min-width吗？也就是说所有默认样式都是用于移动的，因此使用min-width逐步增强布局？

解决方法

它真的取决于你的样式表的工作原理。例如：

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

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

如果屏幕大于或等于100px，上面的两个媒体查询将使主体字体粗体，如果大于或等于200px，也使颜色#555;

另一个例子：

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

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

与第一个示例不同，只有屏幕宽度在0到100像素之间时，才会使正文字体加粗，并使颜色#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，但是如果你想影响一个非常具体的标准，你可以只是结合两者。