CSS 最大宽度与最小宽度

Max-Width vs. Min-Width

提问by James Jeffery

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.

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

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

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

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.

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

One 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-widthto target these devices.

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

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

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

回答by jpostdesign

2 Part Answer

2 部分答案

Part 1: To answer "why people are using min-width over max-width?":

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

It has to do with design flow. Typically, with min-width patterns, you're designing mobile-first. With max-width patterns, you're design desktop-first.

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

Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens.

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

Conversely, using max-width, is desktop-first then adds queries to make styles mobile-friendly

相反，使用 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 */
    }

Part 2: For your particular custom navigation for any device who's width is 360px or less:

第 2 部分：对于宽度为 360 像素或更小的任何设备的特定自定义导航：

You could include that as a separate max-width query, IF thats the only exception to the rule. OR use that style as your baseline, then change it for wider screens.

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

If you do an exception (which isn't really following mobile-first design methods), it'd be something like:

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

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

回答by James Donnelly

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; }
}

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

上面两个媒体查询body在屏幕大于等于100px时会加粗字体，如果大于等于200px也会加颜色#555；

Another example:

另一个例子：

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

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

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

与第一个示例不同，这仅当屏幕宽度在 0 到 100 像素之间时才会使body字体加粗和着色#555。如果它在 0px 和 200px 之间，它将是 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; }
}

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

在此示例中，您仅针对宽度介于 100 像素和 200 像素之间的设备——仅此而已。

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

简而言之，如果您希望您的样式从媒体查询中泄漏出来，您可以使用min-width或max-width，但如果您想影响一个非常具体的标准，您可以将两者结合起来。

回答by Heres2u

In short, min-width is a mobile 1st approach, max-width is a desktop 1st approach.

简而言之， min-width 是移动设备的第一种方法，max-width 是桌面设备的第一种方法。

Min-width is the minimum width at which a style will START to be applied. (Have to be ordered from smallest to largest to work properly, regular styles first). Put another way: If device width is greater than or equal to..., then apply some specific styles. With min-width, styles START and continue forever as long as min-width is met, and no max-width is specified.

Min-width 是开始应用样式的最小宽度。（必须从最小到最大订购才能正常工作，首先是常规样式）。换句话说：如果设备宽度大于或等于...，则应用一些特定的样式。使用 min-width 时，只要满足 min-width 要求，样式就会开始并一直持续下去，并且没有指定 max-width。

Max-width is the maximum width at which a style will continue to be applied. After that, the style will STOP being applied. (Have to be ordered from largest to smallest to work properly, regular styles first). Put another way: If device width is less than or equal to..., then apply specific styles. Styles STOP as soon as width greater than max-width is hit.

Max-width 是样式将继续应用的最大宽度。之后，样式将停止应用。（必须从大到小订购才能正常工作，首先是常规款式）。换句话说：如果设备宽度小于或等于...，则应用特定样式。一旦宽度大于 max-width ，样式就停止。

Finally, It depends on how you want to implement. There is no ONE RIGHT solution as some may claim. In my opinion min-width works great when starting from scratch, but max-width often makes more sense to me when retrofitting an existing web site.

最后，这取决于您想如何实施。有些人可能会声称，没有一种正确的解决方案。在我看来，从头开始时 min-width 效果很好，但在改造现有网站时，max-width 通常对我更有意义。

回答by nickjag

Because you're developing a website starting with a mobile design and increasing complexity with resolution, I would advise going with min-widthbecause that follows the same work pattern.

因为您正在开发一个从移动设计开始并随着分辨率增加复杂性的网站，我建议您继续使用，min-width因为这遵循相同的工作模式。

Technically, min-widthis "mobile first" in the sense that you generally begin developing for mobile and add more complexity as the resolution increases.

从技术上讲，min-width是“移动优先”，因为您通常开始为移动设备进行开发，并随着分辨率的增加而增加更多的复杂性。

However, the term gained popularity more so over its alternative meaning which has generally come to imply more about an increase of focus on mobile efforts and prioritization (mostly fueled by clients or management that don't understand the technical inference). That is likely why you end up seeing a lot of min-widthexamples online (trendy bloggers writing about trendy topics).

然而，该术语因其替代含义而更受欢迎，这通常意味着更多地关注移动工作和优先级的增加（主要由不了解技术推理的客户或管理层推动）。这可能就是为什么您最终会在min-width网上看到大量示例（时尚博主撰写时尚主题）的原因。

When I work with complex desktop designs, I personally find it easier to write max-widthqueries to "simplify the equation" so-to-speak. But using max-widthqueries does not prevent you from focusing on mobile and can still completely be a part of a "mobile first" strategy.

当我处理复杂的桌面设计时，我个人发现编写max-width查询来“简化方程式”可以说更容易。但是使用max-width查询并不妨碍您专注于移动设备，并且仍然可以完全成为“移动优先”策略的一部分。

In either case, the most important thing is consistency. Use one and stick to it for that project. A project can become very confusing if it uses both.

无论哪种情况，最重要的是一致性。使用一个并坚持该项目。如果项目同时使用两者，它会变得非常混乱。

As a final note, using less queries when possible is ideal. This can be achieved through good responsive design.

最后要注意的是，尽可能使用较少的查询是理想的。这可以通过良好的响应式设计来实现。

回答by David

I had a unresponsive website first, designed for desktops. Then added responsiveness by adding max-width media queries.

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

My site now has layouts for 320px, 480px, 768px, 960px, and 1024px etc. wide devices, and so I have added media queries that look like max-width: 479px, max-width: 767px, max-width: 959pxetc. This works fine - the site behaves as it should.

我的网站现在有320像素，480像素，768px，宽960px，和1,024像素宽等设备，所以我增加了媒体的质疑，看上去就像布局max-width: 479px，max-width: 767px，max-width: 959px等这工作得很好-该网站的行为，因为它应该。

However, I've recently found that the Chrome Developer Tools "Device Mode" has a Media Queries Tool that is really, really useful to me. It allows me to click to display the website at each media query level that Chrome finds on my page. This is a great help to me when designing the responsive layouts.

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

The Media Queries Tool uses the numbers it finds in the media queries, i.e. 479, 767, 959, 1023 etc. But this means that, for example, if I want to see what how my layout for a 480px-wide device looks, I have to click the max-width 767px level media query, which to me is quite unintuitive.

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

This has made me rethink my current desktop-first CSS, and I will be rewriting my CSS using a mobile-first approach.

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

I think the mobile-first CSS using min-widthwill be much more readable, because you will see a media query for min-width: 480pxand know that will be the CSS for a 480px-wide device.

我认为使用移动优先的 CSSmin-width将更具可读性，因为您将看到媒体查询min-width: 480px并知道这将是 480 像素宽设备的 CSS。

回答by Duncan Beattie

The majority of sites I've been working on are designed for desktop first and in these cases using max-widthqueries makes sense. Generally if you are starting small screen first use min-widthand then build on top with media queries targeting larger resolutions.

我一直在工作的大多数网站首先是为桌面设计的，在这些情况下使用max-width查询是有意义的。通常，如果您开始使用小屏幕min-width，然后再使用针对更大分辨率的媒体查询进行构建。

You can of course mix both min and max queries to get specific resolutions

您当然可以混合最小和最大查询以获得特定分辨率

Maybe have a look at using min-device-widthfor the specific issue you're having with the navigation

也许看看 usingmin-device-width用于您在导航中遇到的特定问题

回答by Jerry King

What are Mobile-first and Desktop-first approaches?

什么是移动优先和桌面优先的方法？

A mobile-firstapproach to styling means that styles are applied first to mobile devices. Advanced styles and other overrides for larger screens are then added into the stylesheet via media queries.

甲移动第一方法的造型装置，其样式首先应用到移动设备。然后通过媒体查询将大屏幕的高级样式和其他覆盖添加到样式表中。

This approach uses

这种方法使用

min-width

最小宽度

media queries.

媒体查询。

Here's a quick example:

这是一个快速示例：

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

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

In the example above, will have a red background below 600px. Its background changes to green at 600px and beyond.

在上面的例子中， 将有一个低于 600px 的红色背景。它的背景在 600 像素及以上时变为绿色。

On the flipside, a desktop-firstapproach to styling means that styles are applied first to desktop devices. Advanced styles and overrides for smaller screens are then added into the stylesheet via media queries. This approach uses >max-width media queries.

另一方面，桌面优先的样式方法意味着样式首先应用于桌面设备。然后通过媒体查询将小屏幕的高级样式和覆盖添加到样式表中。这种方法使用 >max-width 媒体查询。

Here's a quick example:

这是一个快速示例：

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

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

will have a background colour of green for all widths. If the screen goes below 600px, the background colour becomes red instead.

所有宽度的背景颜色均为绿色。如果屏幕低于 600 像素，则背景颜色变为红色。