根据设备显示不同的手册答案

【问题标题】：Showing different manu based on devices根据设备显示不同的手册
【发布时间】：2016-07-20 09:42:05
【问题描述】：

我想根据不同的设备（例如移动设备和桌子）显示不同的菜单我想使用 sidr 显示菜单。对于大型设备，菜单表示应该是固定的引导菜单。如何实现这一点我的代码是

我的代码是

<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>

我的完整代码是HERE

【问题讨论】：

你想只在移动设备上显示移动菜单，只在大设备上显示大菜单，对吗？
是的，你是对的
然后参考我的答案

标签： jquery css twitter-bootstrap sidr

【解决方案1】：

您的代码中有两个菜单，移动视图和大视图。在大视图中，我只是隐藏小菜单并使用 @media (min-width: 769px){} 显示大菜单，而对于移动视图，我只是隐藏大菜单并使用 @media (max-width: 768px){} 显示小菜单

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

@media (min-width: 769px){ 
  #large-menu{
    display: block;
  }
  #mobile-menu{
    display: none;
  }
}

【讨论】：

【解决方案2】：

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

 @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;
        }
    }

工作链接是here 参考stackoverflow

【讨论】：

好，你可以写“media (max-width: 768px){}”而不是“media screen and (min-width: 0px) and (max-width: 768px){}”。
2000px之后呢？