CSS媒体查询正确用法

Question

这个问题可能很基础，但我对这类事情不熟悉。我刚刚发现了媒体查询，我将更新我的网站，使其对每台设备都很友好。

@media screen and (max-width:960px) { 
...    
}

@media (min-width:961px) { 
... 
}

我决定设置这些断点，因为如果大小为＆gt; = 960px，我的网站会很好看。其他我需要更改CSS并设置适合移动设备的布局。

问题

上面的代码很好，我使用笔记本电脑或智能手机/平板电脑时有不同的CSS样式。我注意到当宽度正好是960px时会出现问题：我看不到应用的CSS样式。

我的意思是如果我将页面大小调整为960px，看起来好像没有css规则。您可以查看FIDDLE。如您所见，我有2个div，它们根据媒体查询的规则显示。

有什么想法吗？

Answer 1

如果您的网站外观很好，如果尺寸为＆gt; = 960px，那么您必须重新定义较小尺寸的样式。所以它必须是959px。 虽然如果您不打算扩展一定数量的@media块，您可以使用技巧：删除行@media (min-width:961px)并将其内容移至样式表之前{{1}并将960更改为959，因此它必须如下所示：

@media screen and (max-width:960px) {...}

Answer 2

您的问题是您的媒体查询说：

-

（查询A）

“在960px时，停止显示此CSS。”

（查询B）

“在961px，开始显示这个CSS。”

-

将查询A调整为max-width: 961px并确保查询B以@media screen and开头，应该修复它。