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屏幕定义的CSS和（max-width：960px）将首先应用于 @media屏幕和（max-width：700px）

然而，在我的测试中，当调整浏览器窗口的大小时，我可以看到首先应用 @media屏幕和（max-width：960px）。然后我将窗口调整得更小我可以看到当 @media screen和（max-width：700px）被应用时保持/组合的变化

所以我的问题是......我看到的是纯粹的运气和违反规范吗？或者我错过了什么？

Answer 1

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

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

Answer 2

通过媒体查询，源订单很重要。

请参阅Logic in Media Queries

在您的情况下，第一个查询将始终匹配宽度＆lt; = 960px。

如果要排除该css，可以为其添加最小宽度值。

Answer 3

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