我正在使用媒体查询来制作自适应网站。这不是我的问题，但这就是我今天在这里提出这个问题的原因。
在某个浏览器宽度处，我页面顶部的水平导航变得太宽（变得挤压）并且在我的布局中看起来很尴尬。我想要做的是：当用户浏览器达到某个最小宽度时，我想（使用js）隐藏最初在用户屏幕上呈现的水平导航（无序列表6）（如果您正在查看宽度大于650px）并用一个“按钮”替换它，当点击时按下无序列表。
现在，CSS不是问题所在。我似乎无法弄清楚如何从最初渲染的原始水平导航过渡到更加用户友好的导航。
答案 0 :(得分：0)
一个简单的解决方案是拥有两套导航机制。隐藏一个并显示另一个。
您需要在resize的{{1}}事件中添加eventlistener，您将在其中检查窗口的document并确定要显示的导航innerWidth。
div或者，您可以保留水平导航，但指定document.addEventListener("resize", function () {
if (window.innerWidth < 650) {
document.getElementById("horizontal_nav").style.display = "block";
document.getElementById("dropdown_nav").style.display = "none";
} else {
document.getElementById("dropdown_nav").style.display = "none";
document.getElementById("horizontal_nav").style.display = "block";
}
});
max-width，一旦达到此目标，它就会停止增长。
650px答案 1 :(得分：0)
也许这些可以提供帮助：
http://www.bram.us/2011/10/24/jquery-mobile-select-jquery-mobile-navigation-replacement-plugin/
https://github.com/joggink/jquerymobiledropdown
我知道。这是jQuery，但我希望ppl得到一般的想法。