调整窗口大小时，如何防止响应式菜单破坏我的布局？答案

【问题标题】：How can I prevent a responsive menu from breaking my layout when the window is resized?调整窗口大小时，如何防止响应式菜单破坏我的布局？
【发布时间】：2015-05-04 20:01:03
【问题描述】：

我已经更新了我自制的响应式菜单，但我遇到了调整大小时菜单消失的问题。

当我将窗口缩小到 1100 像素以下并打开响应式菜单时，一切都很好。但是，当我关闭响应式菜单时，Jquery 会应用 display: none 内联属性。

当我调整回全宽时，这会使我的屏幕消失。

我已经用下面的 javascript 更新了我的 codepen。这是一个好的解决方案还是有人可以帮助我改进这个响应式小菜单？

Codepen link

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth > 1100) {
        $('.navigational-menu').show();
    }
});

【问题讨论】：

Code Review 有一个专用站点，但它们需要 working 代码。您正在报告代码中的错误，因此请尝试在帖子本身中包含一个小测试用例，以便其他人可以检查您的代码并帮助您找到问题。见：MCVE
使用 css 媒体查询通过类切换而不是 .hide()/.show() 来强制状态，你的很多麻烦都会消失。

标签： javascript jquery html css dom

【解决方案1】：

不幸的是，这只是调整网站以响应的一部分。

首先，我建议使用媒体查询而不是 javascript 来执行此操作。首先为您要定义的不同宽度添加规则，所以如果它低于 1100 像素，您需要有

@media screen and (max-width: 1100px) { /* Changes to your CSS for widths below 1100px will go here */}

您想要做的是将窗口大小调整到低于该宽度，然后查看所有“中断”或需要使用新 CSS 规则重做的所有内容，然后进行这些更改。您可能需要更改菜单大小，可能是字体大小（取决于您的设置方式）。但我发现最简单的方法是打开浏览器 CSS Element Inspector / CSS Editor，并在调整浏览器大小时即时进行这些更改。然后，只需将这些更改转移到您的主代码中，并继续使用较低的宽度。 1100px 以下的这一规则可能还不够，您必须创建一些规则以确保它在所有宽度下看起来都不错。所以说，一旦你达到 800px，你会想要进一步更新一些元素，你只是

    @media screen and (max-width: 800px) { /* Changes to your CSS for widths below 800px will go here */}

然后做同样的事情。继续前进，直到您的网站在所有宽度上都能正常运行，并且您的网站将做出响应。

从您的问题的外观来看，您似乎正在寻找一种灵丹妙药来使菜单自动响应地工作......不幸的是，它不是这样工作的，您将不得不编码在每个级别的更改中，使其看起来像您想要的那样。

祝你好运！

【讨论】：