div display，css @media vs javascript

Question

对于我的第一个响应设计，我使用css @media和display: none；或display:table-cell来显示或隐藏侧栏。这很好，我需要显示:三个div布局的表格单元格。

CSS示例：

#div_right { display: table-cell; }
@media screen and (max-width: 700px) { #div_right {display: none; } }

JS是标准的ToogleDisplay函数( e.style.display = "table-cell"；代替e.style.display =“块”；)

在小窗口/屏幕上，侧边栏是隐藏的，但是一个新的div有两个选项来显示这两个相同的导航侧边栏:点击一个带有嵌入式javascript的链接，就可以显示一个侧栏div。它也很好用。

当我显示然后通过单击JS链接(在小窗口上)隐藏侧边栏，然后将窗口调整到更大的宽度时，就会出现问题:这次没有显示侧边栏！

是否有@media条件指定“大于xxx的宽度”强制显示:表格单元格；？

我不想使用jQuery，使用CSS的解决方案会很好。

Answer 1

您是将jquery用于$.('el').css("display“、"none")还是.hide()元素？如果是这样，jquery将将样式添加为内联样式，从而覆盖媒体查询。您可以尝试添加！重要的CSS代码(媒体查询)，它可能会工作。请参阅：http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries

另外，请注意以下经验法则: CSS样式应用于以下等级/优先级：！重要总是最高优先级，与元素更近的样式将覆盖之前定义的样式:内联样式是更高优先级的CSS样式是最低优先级

请查看: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm

另外，您可能希望不仅使用最小宽度，而且要使用类似于：@media屏幕(最小宽度: xxx)和(最大宽度: yyy){ }的范围。

查看来自：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/的一些标准模板

Answer 2

只需使用min-width而不是max-width

#div_right { display: table-cell; }
@media screen and (min-width: xxx) { #div_right {display: none; } }

非常简单，告诉浏览器，如果浏览器比xxx大，将使用这些规则。

如果您想了解有关@media查询的所有信息，请查看上面的Mozilla文档。

可能对你很有帮助。

若要查看其运行情况，请参见此JSFiddle

正如在另一个答案中所指出的，如果使用jquery，它将覆盖@media规则。

不使用!important的正确方法是在js中使用jquery：：

$(".menu").show().css("display","block");

这个JS显示它为display:block;