html - 使用媒体查询隐藏主菜单

Question

在我的网站上，我的菜单导航如下:

   <nav id="main-menu" class="menu-wrapper col-md-12 collapse navbar-collapse mynavbar">
    <ul id="mn_menu" class="menu nav navbar-nav">
        <li><a href="<?=site_url()?>">Home</a></li>
        <li><a href="<?=site_url()?>section/about-us">About Us</i></a></li>
        <li><a href="<?=site_url()?>section/services">Services</a></li>
        <li><a href="<?=site_url()?>section/contact-us">Contact Us</a></li>
     </ul>
   </nav>

在大屏幕上我想隐藏这个菜单。所以当我在我的 CSS 文件中写入以下内容时它不会隐藏菜单

 @media screen and (max-width: 992px) {
   #mn_menu {
     display: none;
   }
}

但是，当我使用如下所示的内联 css 时，它会隐藏菜单

<ul id="mn_menu" class="menu nav navbar-nav" style="display:none;">

请告知如何使用媒体查询从 CSS 文件中隐藏我的菜单。提前致谢。

Answer 1

您需要 min-width 而不是 max-width。 min-width 表示只要浏览器宽度大于或等于 992px，它就会应用下面的 CSS 规则。

@media screen and (min-width: 992px) {
   #mn_menu {
     display: none;
   }
}