媒体查询后如何重置 CSS？答案

【问题标题】：How to Reset CSS after Media Query?媒体查询后如何重置 CSS？
【发布时间】：2014-04-12 14:26:58
【问题描述】：

我的页面上有一些元素通过媒体查询显示和隐藏，最终导航消失并被响应式 jQuery 菜单取代。这一切都很好，但是当我调整浏览器的大小之后，一些曾经隐藏的元素不是。这就是我的媒体查询

@media only screen 
and (max-width: 1282px) 
{ 
#wrapMiddleNew { display:block; }
    }

我本质上想在重新调整大小的相同断点上再次隐藏它。这似乎不起作用。

@media only screen 
and (min-width: 1282px) 
{ 
#wrapMiddleNew { display:none; }
}

【问题讨论】：

我不会假装这是一个答案，但您使用的只有这两个媒体查询吗？我会留下第一个媒体查询并将该 CSS 放在基础 CSS 文件中，然后只有最小宽度媒体查询。

标签： css media-queries

【解决方案1】：

我刚刚浏览了您的页面，您必须添加更多查询格式.. 这应该可以解决问题

/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
     display:block;
}

#breakNav {
     display:none;
}
/* Media Query */
@media only screen and (max-width: 1282px) {
      #wrapLeft, #wrapRight {
          display:none;
      }
     #breakNav {
          display:block;
     }
}

@media only screen and (max-width: 900px) {
     #wrapLeft, #wrapRight, #breakNav {
     display:none;
}

}

所以每次你的窗口变低时，1282px 就会出现，如果它更大会隐藏....

【讨论】：

对不起，我的问题并不完全清楚。我正在使用的查询工作，但在 JS 菜单启动并放大浏览器后，原本隐藏的 #wrapMiddleNew 不会恢复到隐藏状态。看这里我的意思gregtaylordesignstudio.com/Great-Lakes-Project/…
谢谢，奇怪的是它只工作一次。但是，如果您再次缩小和放大浏览器，#breakNav 不会再次隐藏
在您的在线网页中进行更改，这样我就可以看到您有哪些额外的代码在弄乱它......
好的，现在我知道发生了什么，我想你有一个添加 style="display: block;" 的 Jquery在 html 中，因为媒体查询没有添加它，所以将该 div ID 名称更改为另一个名称并在您的 css 和查询中更改它，或者如果您有一个在调整大小时调用 #breakNav 的 jquery 删除它。

【解决方案2】：

这样做：

 #wrapMiddleNew{
    display:none;
 }
 @media only screen  and (max-width: 1282px) 
 { 
      #wrapMiddleNew { display:block; }
 }

【讨论】：

对不起，我的问题并不完全清楚。我正在使用的查询工作，但在 JS 菜单启动并放大浏览器后，原本隐藏的 #wrapMiddleNew 不会恢复到隐藏状态。看这里我的意思gregtaylordesignstudio.com/Great-Lakes-Project/…

【解决方案3】：

你不需要第二个查询，因为css的第一位只有在屏幕小于一定数量时才生效这里是一个演示：

http://jsfiddle.net/Hive7/WZXM6/

CSS：

@media all and (max-width: 500px) {
    .hi {
        display: none;
    }
}

这是一个媒体查询教程：

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

您的目标是错误的 div，您的查询应该如下所示：

@media only screen and (max-width: 1282px) { 
    #breakNav { 
        display: none;
    }
}

然后删除任何影响该元素的 jquery

【讨论】：

对不起，我的问题并不完全清楚。我正在使用的查询工作，但在 JS 菜单启动并放大浏览器后，原本隐藏的 #wrapMiddleNew 不会恢复到隐藏状态。看这里我的意思gregtaylordesignstudio.com/Great-Lakes-Project/…