css - 在顺序媒体查询中使用最大宽度和最小宽度的优点？

Question

在存在一系列明确的断点和相关媒体查询的情况下，每个媒体查询都会更改相同的属性，添加 max-width 值是否有任何优势以及 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;
}

不仅仅是:

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

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

Answer 1

同时指定 min-width 和 max-width 允许您创建互斥的规则 block 。优点是您可以按任何顺序指定媒体查询。 缺点是您需要更频繁地重复 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 允许您创建可以级联跨越多个断点的规则 block 。优点是您可以用最少的重复来编写 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; }
}