媒体查询不显示

Question

我正在努力寻找有关媒体查询的网站。我将此代码段作为菜单的一部分

在我的CSS中

.flexnav.flexnav-show { margin-top: 52px; }第513行 并且在@media all和（min-width：800px）设置了媒体查询，我的平板电脑有这段代码片段。

在我的css第638行

.flexnav.flexnav-show { margin-top: 0px; }

但是，在平板电脑上查看页面时，margin-top仍设置为52px。 我有另一个媒体查询的类似问题。我有以下代码片段

@media only screen and (min-width: 481px) header hgroup { top: 12%; } 对于我的桌面，我有以下内容：

第462行

@media only screen and (min-width: 769px) header hgroup { top:15%; }

在桌面上时，顶部仍为12％

这是该网站的link。 谢谢 -Sohail

Answer 1

你需要使用“max-width” 实施例：

/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
@media screen and (max-width: 769px){
.some-div{ top:15%;}
}
@media screen and (max-width: 481px){
.some-div{ top: 12%;}
}

有时您可以使用“！important”来重写CSS中的先前状态，但不一定。