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

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 等于 >= 或 > 吗？）

我和第一个争吵 (min: 500; min: 700)。这怎么可能有意义？如果是，那意味着什么？媒体查询的出现顺序重要吗？

Answer 1

这些查询参数没有问题。

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

如果屏幕宽度等于或大于 500px，那么，比方说，background-color: orange。

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

如果屏幕宽度等于或大于 700px，那么，比方说，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>

Answer 2

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

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

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

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

Does the order of appearance of media queries matter?

是的，根据级联："Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins."

CSS 旨在让您可以构建自己的样式，从一般到具体，在您进行时覆盖早期规则。

提供默认规则，然后在 window 更宽的情况下分层其他规则，然后在非常宽的情况下分层更多是一种标准方法。

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

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

What could two lower bounds on media queries mean?

html

css

media-queries

css-grid