媒体查询的两个下限意味着什么？

Question

作为一名必须懂一点设计的程序员，我很高兴 CSS grid 终于吸引了我对设计应该是什么的感觉：简洁和合乎逻辑。

但authoritative 消息来源写道：

@media (min-width: 500px) { ... }
@media (min-width: 700px) { ... }

我会理解设置下限和上限

@media (min-width: 500px) { ... }
@media (max-width: 500px) { ... }

用于设计功能。

更好的是，由于开发人员有权（/要求）迂腐，我会更自在

@media (min-width: 500px) { ... }
@media (max-width: 499px) { ... }

知道我们处理的是整数，而不是浮点数（但无论如何，min 是否等同于 >= 或 >？）

我的争吵是第一个（最少：500；最少：700）。这怎么可能有意义？如果确实如此，这意味着什么？媒体查询的出现顺序重要吗？

Answer 1

如果宽度至少为 500 像素，则适用第一个媒体查询中的规则。

如果宽度至少为 700 像素，则适用第二个媒体查询中的规则。

因为它不能是 700 而不是至少 500，如果第二个媒体查询中的规则适用，那么第一个中的规则也适用。

根据the cascade完全应用了多个冲突规则，就好像不涉及媒体查询一样。

媒体查询的出现顺序重要吗？

是的，按照级联：“最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。”

---

CSS 的设计目的是让您可以构建从通用到特定的样式，并随时覆盖之前的规则。

提供默认规则，然后在窗口较宽时分层附加规则，如果窗口非常宽则分层更多是标准方法。

尝试为不同的视口大小构建完全不同的样式表会导致重复并使维护更加困难。

Answer 2

这些查询参数没有问题。

@media (min-width: 500px) { } means...

如果屏幕宽度等于或大于 500 像素，那么假设为background-color: orange。

@media (min-width: 700px) { } means...

如果屏幕宽度等于或大于 700 像素，那么假设为background-color: lightgreen。

根据级联规则，CSS 规则的顺序很重要。

使用下面的演示进行说明。切换规则的顺序，以便更好地理解源顺序的重要性。

jsFiddle

article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  padding: 10px;
  background-color: gray;
}

section {
  background-color: aqua;
}

section:first-child::after {
  content: "screen width < 500px"
}

@media (min-width: 500px) {
  section {
    background-color: orange;
  }
  section:first-child::after {
    content: "screen width >= 500px"
  }
}

@media (min-width: 700px) {
  section {
    background-color: lightgreen;
  }
  section:first-child::after {
    content: "screen width >= 700px"
  }
}

@media (min-width: 900px) {
  section {
    background-color: yellow;
  }
  section:first-child::after {
    content: "screen width >= 900px"
  }
}

@media (max-width: 500px) {
  article {
    grid-template-columns: 1fr;
    grid-auto-rows: 50px;
  }
}

<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>