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

这些查询参数没问题。

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

Answer 2

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

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

由于不能不小于500也不能为700，因此，如果第二个媒体查询中的规则适用，则第一个媒体查询中的规则也适用。

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

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

是的，按照级联：“最后，按指定的顺序排序：如果两个声明的权重，来源和特异性相同，则后一个指定为准。”

CSS的设计旨在使您可以从通用样式到特定样式构建样式，并随便覆盖以前的规则。

提供默认规则，然后在窗口变宽时分层附加规则，然后在窗口变宽时分层甚至更多，这是一种标准方法。

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

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

2 个答案: