Jquery 和响应式设计在调整浏览器大小时表现不尽如人意

Question

我正在尝试实现一个响应式设计，它在断点 700px 处在导航菜单和导航按钮之间切换。为此，我有两件事：

媒体查询

@media screen and (min-width: 700px)
{
    #main-nav
    {
        display: block;
    }

    #navButton
    {
        display: none;
    }
}

一个简单的 jQuery 脚本，用于在打开菜单并调整 window 大小时关闭菜单。

// Fixing window resize bugs
$( window ).resize( function ()
{
    if ( $( window ).width >= 700 )
    {
        $( "#navButton" ).css( "display", "none");
    }
    else if ( $( window ).width < 700 )
    {
        $( "#navButton" ).css( "display", "block");
        $( "#menu-buttons" ).css( "display", "none");
    }
});

当我调整浏览器大小时出现问题window。它在我所有的 Mac 浏览器（Chrome 45、Firefox 41 和 Safari 8）上完美地在两种布局之间切换，但它在 windows 浏览器（IE 11 和 Firefox 41）上不起作用测试至今）。当 window innerWidth 在 700px 和 716px 之间时，nav 和 button 同时出现在屏幕上。一种解决方法是在脚本中用 css( "visibility", "hidden"); 替换 css( "display", "none"); 但不幸的是，它会产生其他问题...

如果有人知道这个问题，请告诉我。

编辑：通过在媒体查询中使用关键字“!important”解决了问题。

Answer 1

问题已通过在媒体查询中添加 !important 得到解决。

Jquery 和响应式设计在调整浏览器大小时表现不尽如人意

Jquery and responsive design don't behave as expected when resizing browser

jquery

cross-browser

responsive-design