CSS3 - 自动根据媒体查询倒塌DIV

Question

场景：

---

注：我试图通过CSS3完全做到这一点，而无需使用任何JavaScript/JQuery的/等的问题的解决方案需要纯粹在CSS中（不需要脚本!!!）

---

屏幕布局是一个Header + 2列布局。标题包含网站标题等。左栏设置为屏幕宽度的大约25％，并包含一组菜单。右侧栏是屏幕的其余部分，并包含页面的“内容”。

当屏幕宽度> 700px时，布局如上（标题+ 2列）。

但是，当屏幕宽度为< 700px时，布局应该更改为单个列。在这里，订单将是标题，然后是菜单，然后是内容。

菜单本身具有通过扩展器实现的展开/折叠动作。应该发生的情况是，当屏幕从700px到012px700px（即，当布局改变时）调整大小时，菜单应该折叠。

问题：

问题是，当我尝试折叠菜单在我的媒体查询，因为媒体查询迫使属性留在原地菜单不会再扩大！通过设置或删除“display：none;”来展开/折叠。属性。

指针将不胜感激。

Answer 1

最简单的解决方案是避免直接设置display属性（我假设你用JS做 - 你没有解释你对“Expander实现”的含义）。相反，请在菜单上切换类名，并使用媒体查询来确定其样式。

@media only screen and (max-width: 699px) { 
    .menu.disabled { 
     display: none; 
    } 
}