Question

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

当我将窗口缩小到1100px宽度以下并打开响应式菜单时，一切都很好。但是当我关闭响应式菜单时，Jquery应用了display：none inline属性。

当我调整回到最大宽度时，这会使我的屏幕消失。

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

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

Answer 1

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

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

@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 */}

做同样的事情。继续前进，直到您的网站在所有宽度上都能正常运行，您的网站才会响应。

从问题的外观来看，似乎你正在寻找一个神奇的子弹来让菜单自动响应......不幸的是，这不是它的工作原理，你将不得不编码在每个级别的变化，使它看起来你喜欢。

祝你好运！

如何在调整窗口大小时阻止响应式菜单破坏我的布局？

1 个答案: