1

假设我有

/*
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，并且（最大宽度：960px）将在@media屏幕之前首先应用和（最大宽度：700px）

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

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

4

3 回答 3

3

您的测试证明它应该如何工作。

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

于 2013-08-14T14:55:49.820 回答
2

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

查看媒体查询中的逻辑

在您的情况下，当宽度 <= 960px 时，第一个查询将始终匹配。

如果您想排除该 css，您可以为其添加一个 min-width 值。

于 2013-08-14T14:55:50.273 回答
0

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

于 2013-08-14T14:58:10.320 回答