媒体查询不显示

Question

我正在为一个有关媒体查询的网站而苦苦挣扎。我有这个代码 sn-p 作为我的菜单的一部分

.flexnav.flexnav-show { margin-top: 52px; } 我的 CSS 中的第 513 行 并在@media all 和（最小宽度：800px）处设置媒体查询，我的平板电脑有此代码 sn-p。

.flexnav.flexnav-show { margin-top: 0px; } 在我的 css 中的第 638 行

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

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

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

在桌面上时，顶部仍然是 12%

这是网站的link。 谢谢 -Sohail

Answer 1

您需要使用“最大宽度” 示例：

/* 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 中重写之前的状态，但不是必须的。