将@media与javascript组合以设置显示无/块

我在页面的某个地方有一个div面板，当窗口太小时应该隐藏它

使用此css可以很好地工作：

#panel {display: block; }

@media (max-width: 1000px) {
   #panel { display: none; }
}

还有一条规则显示一个按钮，该按钮应使#面板在单击时可见

#panel {display: block; }
#button {display: none; }
@media (max-width: 1000px) {
   #panel { display: none; }
   #button {display: block; }
}

javascript如下所示：

 $("#button").click(function() { $("#panel").toggle(); });

---

还有一些其他的规则，使小组显得更友好。。。不用解释了。问题是：当您单击按钮并再次将面板的显示状态更改为“开”和“关”时。这意味着

display:none

属性是由javascript设置的，当您调整窗口大小>1000px时，面板将不再显示。即使您创建了一些规则，如

@media（最小宽度：1000px）

，也不会应用面板的默认样式。。js似乎有优先权。。那么，将媒体查询和js结合起来的最佳方式是什么呢？

您可以为窗口大小调整事件添加一个事件侦听器，当窗口大小调整到宽度>1000px时，该事件将强制面板可见

$(window).on('resize', function() {
    if (window.innerWidth > 1000) {
        $("#panel").show();
    }
});

---

一旦

切换

，

显示

或

隐藏

被调用，这将胜过CSS中的任何内容。

您可能会担心一些可能永远不会发生的事情。人们不会到处调整浏览器的大小，除非他们正在演示一个响应迅速的网站。呵呵。。不错。。也许你是对的。。但如果有人这样做，页面将完全被打破。这最好不要发生是的。。谢谢这就是我目前正在做的，因为我没有更好的解决办法。。但是在这种情况下，您根本不需要@media查询，因为您还可以在else部分隐藏#面板：）我只是想知道如何确定对象的状态。。如果同时使用这两种类型，

toggle

、

show

和

hide

修改元素的样式标记，则某些内容可能会完全中断，因此它将始终覆盖CSS中的内容。我认为在这种情况下结合使用CSS和javascript是有意义的。