CSS 以及如何应用媒体查询

Question

假设我有

/*
css for elements section #1 in page
css for elements section #2 in page
*/

@media screen and (max-width: 960px) {
/* redefines/alters CSS for elements in section #1 in page */
}

@media screen and (max-width: 700px) {
/* redefines/alters CSS for elements in section #2 in page */
}

我读过很多地方，总是只有一个媒体查询匹配...因此不能依赖已经为 @media screen 和 (max-width: 960px) 定义的 CSS 将在 @media screen 和 (max-width: 700px)

之前首先应用

但是，在我的测试中，当我向下调整浏览器窗口的大小时，我可以看到首先应用了 @media screen 和 (max-width: 960px)。然后我将窗口调整得更小，我可以看到更改在 @media screen 和 (max-width: 700px) 被应用时保留/合并

所以我的问题是……我所看到的纯粹是运气而不是规范吗？还是我错过了什么？

Answer 1

我认为您没有理解媒体查询本身的意义。您的第一个 960 声明说，“如果您的屏幕分辨率小于 960 像素，则应用这些样式”，然后一旦达到 700，它将应用这些样式。这只是基本的响应式设计。

Answer 2

对于媒体查询，源顺序很重要。

见Logic in Media Queries

在您的情况下，当宽度

如果你想排除那个 css，你可以给它添加一个 min-width 值。

Answer 3

您的测试证明是正确的how it should work。

在您的示例中，当浏览器的宽度小于 960 像素和小于 700 像素时，这两个查询都将被视为正确。这是按预期工作的，事实上，这就是我在多个站点上实现响应式设计的方式，每个查询都是一个新的断点，说明事物如何优雅地降级为小尺寸。