最大宽度与最小宽度

Question

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

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

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

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

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

Answer 1

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

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

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

上述两个媒体查询会使body字体加粗如果屏幕是大于或等于为100px,但也使颜色#555,如果是大于或等于200像素;

另一个例子:

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

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

与第一个示例不同,仅当屏幕宽度介于0和100px之间时,才会使body字体变为粗体和颜色#555.如果介于0px和200px之间,则为彩色#555.

媒体查询的优点在于您可以将这些语句组合在一起:

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

在此示例中,您仅定位宽度介于100px和200px之间的设备 - 仅此而已.

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

Answer 2

2部分答案

第1部分:回答"为什么人们使用最小宽度超过最大宽度？":

它与设计流程有关.通常,使用最小宽度模式,您将设计移动优先.使用最大宽度模式,您将设计为桌面优先.

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

相反,使用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部分:对于宽度为360px或更小的任何设备的特定自定义导航:

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

如果你做了一个例外(它不是真正遵循移动优先设计方法),它会是这样的:

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

Answer 3

简而言之,min-width是移动第一种方法,max-width是桌面第一种方法.

最小宽度是样式开始应用的最小宽度.(必须从最小到最大订购才能正常工作,首先是常规款式).换句话说:如果设备宽度大于或等于......,则应用一些特定样式.使用min-width,样式START,只要满足min-width,就会永久地继续,并且不指定max-width.

最大宽度是继续应用样式的最大宽度.之后,样式将停止应用.(必须从大到大排序才能正常工作,首先是常规款式).换句话说:如果设备宽度小于或等于......,则应用特定样式.一旦宽度大于最大宽度,样式就会停止.

最后,这取决于您希望如何实施.有人可能声称没有一个正确的解决方案.在我看来,从头开始,min-width工作得很好,但是在改造现有网站时,max-width对我来说通常更有意义.

Answer 4

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

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

这种方法使用

最小宽度

媒体查询。

这是一个快速示例：

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

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

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

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

这是一个快速示例：

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

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

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

Answer 5

因为您正在开发的网站从移动设计开始，并且分辨率越来越高，所以我建议您这样做，min-width因为这遵循相同的工作模式。

从技术上讲，min-width“移动优先”是指您通常开始为移动开发，并且随着分辨率的提高而增加了更多的复杂性。

但是，该术语比它的替代含义更受欢迎，这通常意味着更多地关注于对移动工作和优先级的关注（主要是由不了解技术推断的客户或管理人员推动）。这可能就是为什么您最终在min-width网上看到很多示例（时髦的博客写有关时尚话题的博客作者）的原因。

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

无论哪种情况，最重要的是一致性。使用一个并坚持该项目。如果一个项目同时使用，可能会造成混乱。

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