Question

我正在尝试在较小的设备上使用汉堡包菜单。在笔记本电脑和台式机上，我想要左侧的静态菜单。截至目前，我的媒体查询均未被识别。当我在小于438的屏幕上时，什么也没发生。对于较小的屏幕，我没有汉堡菜单，并且导航栏始终固定在左侧。我正在使用codepen和chrome。

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
<nav id="navbar">
   <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <div class="header">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
  <header><h1>JS Data Structures</h1></header>
  </div>
  <div id="nav-links">
    <a class="nav-link" href="#introduction" rel="internal">Introduction</a>
    <a class="nav-link" href="#arrays" rel="internal">Arrays</a>
    <a class="nav-link" href="#array_methods" rel="internal">Array Methods</a>
    <a class="nav-link" href="#.filter()" rel="internal">.filter()</a>
    <a class="nav-link" href="#.reduce()" rel="internal">.reduce()</a>
  </div>
</nav>
</div>
<main id="main-doc"></main>

CSS：

#nav{
position: relative;
  }
.header{
    display:flex;
    align-items: center;
    flex-direction: row;
    height:100%;
    border-bottom:1px solid;
  border-color: rgba(0,22,22,0.4);
  }
  /* Hide the links inside the navigation menu (except for logo/home) */


  .header a {
  background: black;
  width:20%;
    text-align:center;
    position:relative;
    height:100%;
    color:white;
  }
  #nav-links{
    display: none;
  }
  #nav-links a{
    display: none;
  }


#main-doc{
  position: absolute;
    margin-left: 310px;
    padding: 20px;
}
@media only screen and (min-width: 438px){
   #nav-links{
    display: block; 
  }

#nav-links a{
  display:block;
  text-decoration: none;
  border-bottom: 1px solid ;
    padding: 8px;
    padding-left: 45px;
  color: black;
  border-color: rgba(0,22,22,0.4);

  }

.nav{
     position: fixed;
     left:0;
    min-width: 290px;
  border-right: solid;
  border-color: rgba(0,22,22,0.4);
}
.icon{
  display:none;
}
  .header{
    display:block;
    text-align:center;
    height:100%;
    border-bottom:1px solid;
    border-color: rgba(0,22,22,0.4);
  }
}

Answer 1

在底部声明您的媒体查询。并将它们添加到媒体查询中：

.icon {
    display: block;
}

因此，样式应如下所示：

#main-doc{
  position: absolute;
  margin-left: 310px;
  padding: 20px;
}
#nav-links{
  display: block; 
}
#nav-links a{
  display:block;
  text-decoration: none;
  border-bottom: 1px solid ;
  padding: 8px;
  padding-left: 45px;
  color: black;
  border-color: rgba(0,22,22,0.4);
}
.nav{
  position: fixed;
  left:0;
  min-width: 290px;
  border-right: solid;
  border-color: rgba(0,22,22,0.4);
}
.icon{
  display:none;
}
.header{
  display:block;
  text-align:center;
  height:100%;
  border-bottom:1px solid;
  border-color: rgba(0,22,22,0.4);
}
@media only screen and (max-width: 815px){
  #nav{
    position: relative;
  }
  .header{
    display:flex;
    align-items: center;
    flex-direction: row;
    height:100%;
    border-bottom:1px solid;
    border-color: rgba(0,22,22,0.4);
  }
  /* Hide the links inside the navigation menu (except for logo/home) */
  .header a {
    background: black;
    width:20%;
    text-align:center;
    position:relative;
    height:100%;
    color:white;
  }
  #nav-links{
    display: none !important;
  }
  #nav-links a{
    display: none !important;
  }
  .icon {
    display: block;
  }
}

无法识别媒体响应查询

1 个答案: