javascript - div 显示问题，css @media vs javascript

Question

对于我的第一个响应式设计，我使用 css @media with display: none;或 display:table-cell 显示或隐藏侧边栏。这很好用，我需要 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 = "block"; )

在小窗口/屏幕上，侧边栏是隐藏的，但会出现一个带有 2 个选项的新 div 来显示这 2 个相同的导航侧边栏:单击带有嵌入式 javascript 的链接，允许切换显示侧边栏 div。它也可以正常工作。

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

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

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

Answer 1

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

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

很简单，告诉浏览器如果浏览器比xxx大就使用这些规则。
如果您想了解有关@media 查询的所有信息，请查看 Mozilla Docs On It .
可能对您很有帮助。

要查看实际效果，请参阅 JSFiddle

[编辑]正如另一个答案中所述，如果您使用的是 jquery，它将覆盖 @media 规则。
不使用 !important 的正确方法是使用 jquery:在你的 js 中:

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

此 JS 将其显示为 display:block;