Question

如果有一系列明确的断点和相关媒体查询，每个媒体查询都会改变相同的属性，那么添加max-width值以及{{1}是否有任何优势值？

例如，使用是否有任何好处：

min-width

而不仅仅是：

@media (min-width: 300px) and (max-width: 599px) {
   color: red;
}
@media (min-width: 600px) and (max-width: 999px) {
   color: blue;
}
@media (min-width: 1000px) {
   color: green;
}

为了澄清，我理解我可以通过添加最小和最大宽度来定位范围，但我指的是断点是连续的并且基于宽度的情况。鉴于序列中的下一个值将覆盖（trump）前一个值，是否有任何理由明确声明一个范围。

Answer 1

同时指定min-width和max-width可以创建互斥的规则块。优点是您可以按任何顺序指定媒体查询。缺点是您需要更频繁地重复CSS规则。例如：

/* order of media queries does not matter */
@media (max-width: 299px) {
    #section-1 { display: none; }
    #section-2 { display: none; }
}
@media (min-width: 300px) and (max-width: 599px) {
    #section-1 { display: block; }
    #section-2 { display: none; }
}
@media (min-width: 600px) {
    #section-1 { display: block; }
    #section-2 { display: block; }
}

仅指定min-width或max-width可以创建可以跨多个断点级联的规则块。优点是你可以用最少的重复来编写CSS规则。缺点是媒体查询需要按升序（最小宽度）或降序（最大宽度）排序，否则you run into WTFs。例如：

/* mobile first */
#section-1 { display: none; }
#section-2 { display: none; }
@media (min-width: 300px) {
    #section-1 { display: block; }
}
@media (min-width: 600px) {
    #section-2 { display: block; }
}

/* desktop first */
#section-1 { display: block; }
#section-2 { display: block; }
@media (max-width: 599px) {
    #section-2 { display: none; }
}
@media (min-width: 299px) {
    #section-1 { display: none; }
}

Answer 2

阅读我所拥有的许多行业博客甚至博客文章我自己写的，我们通常只提供两个条件的样本：屏幕和最大宽度。例如：
@media only screen and (max-width: 640px)  {...}
此声明将包括屏幕（监视器或设备）和任何屏幕宽度小于640px。混淆吧？特别考虑到我们最近的响应式电子邮件模板，我们使用两个组合断点。例如：
@media only screen and (max-width: 640px)  {...}
@media only screen and (max-width: 479px)  {...}
我当时没有意识到，但在上面的例子中，第二个由于标准的CSS继承，媒体查询实际上胜过第一规则。通过权限，第一个触发任何宽度小于的设备 640px，第二个触发任何宽度小于479px的设备。因此，如果你真的想要胜过第一，你需要确保在第二个条件下覆盖所有CSS属性。

〜SOURCE

＆＃39; device width＆＃39;返回的是基于设备的方向。它并非基于最高的可能维度。设备可以支持任何方向。

同样，术语“最大宽度”＆＃39;是导致我最初混淆的原因。某些设备根据方向和/或缩放级别返回不同的值，而其他设备返回相同的值。无论哪种方式，只有一个宽度＆＃39;在任何给定时间返回的值，它不是基于一系列值。

Answer 3

拥有max-width的优点是您不必在以后覆盖样式。在下面的示例中，600px-999px范围的样式可以根据需要设置样式，而不必担心必须从较小的媒体查询覆盖css。媒体查询的替代级联不会出现这种情况。这取决于你喜欢的方式。

@media (min-width: 300px) and (max-width: 599px) {
   h1 {
       color: blue;
       font-size: 40px;
       text-transform: uppercase;
   }
}
@media (min-width: 600px) and (max-width: 999px) {
    h1 {
       font-size: 10px;
       }
}

如果在浏览器开发人员工具中没有大量的覆盖样式，调试也会更容易。

在顺序媒体查询中使用max-width和min-width的优点是什么？

3 个答案: