Jquery 显示基于设备的不同手册

我想根据不同的设备显示不同的菜单，比如手机和桌子，我想使用sidr显示菜单。 对于大型设备，菜单表示应该是固定的bootstreap菜单。 如何做到这一点我的代码是

我的代码是

<div id="large-menu">
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">My Site</a>
            </div>
            <!-- Collection of nav links and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="Login">Login </a></li>
                    <li><a href="SignUp">Sign Up</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="AboutUs">About Us</a></li>
                    <li><a href="ContactUs">Contact Us</a></li>
                    <li><a href="Terms">Terms & condition</a></li>
                    <li><a href="Privacy">Privacy policy</a></li>
                    <li><a href="Careers">Career </a></li>
                    <li><a href="business">Business</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div id="mobile-menu">
    <div class="bottom-logo">
        <a id="simple-menu" href="#sidr" style="font-size: 50px"><i class="fa fa-list"></i></a>
        <a href="http://www.example.com" style="font-size: 50px">MySite</a>
    </div>
    <div id="sidr">
        <ul>
            <li><a href="Login">Login </a></li>
            <li><a href="SignUp">Sign Up</a></li>
            <li><a href="ForgetPassword">Forget Password</a></li>
            <li><a href="AboutUs">About Us</a></li>
            <li><a href="ContactUs">Contact Us</a></li>
            <li><a href="Terms">Terms & condition</a></li>
            <li><a href="Privacy">Privacy policy</a></li>
            <li><a href="Careers">Career </a></li>
            <li><a href="business">Business</a></li>
        </ul>
    </div>
</div>

切换导航

---

我的完整代码是

代码中有两个菜单，用于移动视图和大视图。在大视图中，我使用

@media（最小宽度：769px）{}

隐藏小菜单并显示大菜单；在移动视图中，我使用

@media（最大宽度：768px）{}

隐藏大菜单并显示小菜单

---

通过添加此媒体查询解决了我的问题

 @media screen and (min-width: 0px) and (max-width: 768px) {
        #mobile-menu{
            display: block;
        }
        #large-menu{
            display: none;
        }
         }

    @media screen and (min-width: 769px) and (max-width: 2000px) {
        #mobile-menu{
            display: none;
        }
        #large-menu{
            display: block;
        }
           body {
            padding-top: 50px;
        }
    }

工作链接是

---

参考

你想只在移动设备上显示移动菜单，而只在大设备上显示大菜单，对吗？是的，你说得对。然后参考我的回答好，你可以写“媒体（最大宽度：768px）{}”，而不是“媒体屏幕和（最小宽度：0px）和（最大宽度：768px）{}”。2000px之后呢？

 @media screen and (min-width: 0px) and (max-width: 768px) {
        #mobile-menu{
            display: block;
        }
        #large-menu{
            display: none;
        }
         }

    @media screen and (min-width: 769px) and (max-width: 2000px) {
        #mobile-menu{
            display: none;
        }
        #large-menu{
            display: block;
        }
           body {
            padding-top: 50px;
        }
    }