Question

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

媒体查询

ng-disabled="userForm.$invalid"

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

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

    #navButton
    {
        display: none;
    }
}

当我调整浏览器窗口大小时出现问题。它可以在我的所有Mac浏览器（Chrome 45，Firefox 41和Safari 8）上完美地在两种布局之间切换，但它在Windows浏览器（到目前为止测试的IE 11和Firefox 41）上不起作用。当窗口内宽度介于700px和716px之间时，导航和按钮同时出现在屏幕上。一种解决方法是在脚本中用// 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"); } });替换css( "display", "none");但不幸的是，它会产生其他问题...

如果有人对此问题有任何疑问，请告知我们。

编辑：使用关键字＆＃34;！important＆＃34;解决问题在媒体查询中。

Answer 1

通过在媒体查询中添加！important来解决问题。

在调整浏览器大小时，Jquery和响应式设计不会按预期运行

1 个答案: