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

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) { ... }

知道我们处理的是整数，而不是 float (但无论如何，min 是否等同于 >= 或 >？)

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

Answer 1

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

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

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

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

Does the order of appearance of media queries matter?

是的，根据级联:“最后，按指定的顺序排序:如果两个声明具有相同的权重、来源和特异性，则指定的优先。”

---

CSS 的设计目的是让您可以构建自己的样式，从一般样式到特定样式，并随时覆盖早期规则。

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

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