最大宽度与最小宽度 [英] Max-Width vs. Min-Width

问题描述

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

Most of the tutorials I'm reading on using Media Queries are demonstrating the use of min-width, but I'm rarely seeing people using max-width.

这是一种设计趋势或模式，为什么人们使用 width over max-width ？

Is this some sort of design trend, or pattern, why people are using min-width over max-width?

从移动开始，到桌面。我使用Foundation 4，但使用媒体查询删除页面上的各种元素，并重新定位源订单。

For example, I'm designing a site starting from mobile, working up to the desktop. I am using Foundation 4, but using media queries to remove various elements on the page and re-position the source order.

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

On thing I am facing is a custom navigation for any device who's width is 360px or less. I want them to have a vertical navigation, rather than an inline horizontal. So my idea was to use max-width to target these devices.

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

Should I be using min-width if I am designing mobile first? I.e. all the default styles are for mobile, and thus using min-width to progressively enhance the layout?

推荐答案

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

It really depends on how your stylesheet works. For example:

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

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

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

The above two media queries would make the body font bold if the screen is greater than or equal to 100px, but also make the color #555 if it's greater than or equal to 200px;

另一个例子：

@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 。

Unlike the first example, this makes the body font bold and color #555 only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555.

媒体查询的优点是，结合这些语句：

The beauty of media queries is that you can combine these statements:

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

在此示例中，您只定位宽度介于100像素和200像素之间的设备

In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.

简而言之，如果您希望您的样式能够从媒体查询中 c $ c> min-width 或 max-width ，但如果您想影响非常具体标准，你可以只是结合两个。

In short, if you want your styles to leak out of media queries you'd use either min-width or max-width, but if you're wanting to affect a very specific criteria you can just combine the two.

这篇关于最大宽度与最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！