Question

基本上我想创建一个媒体查询，这将使我的导航栏消失并变为菜单图标......但它仍然不会显示。有没有人有办法解决吗？这是我的代码：

<header>
  <div id="logo"></div>
  <nav> 
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">Latest Videos</a></li>
      <li><a href="#">About Me</a></li>
    </ul>
  </nav>
</header>

我的CSS：

nav {
  float: right;
  padding: 35px 20px 20px 0px;
}
#menu-icon{
  display: hidden;
  width: 40px;
  height: 40px;
  background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
a:hover#menu-icon {
  border-radius: 4px 4px 0 0;   
}
ul {
  list-style: none; 
}
nav ul li {
  font-size: 25px; 
  display: inline-block;
  float: left;
  padding: 20px;
}
.current {
  color: #fff;
  text-decoration: underline;
}

最后我的媒体查询：

@media screen and (max-width: 478) {
  body {
    position: absolute; 
  } 
}
@media screen and (max-width: 478) {
  header {
    position: absolute; 
  }
  #menu-icon {
    display: inline-block;  
  }
  nav ul, nav:active ul {
    display: none;
    position: absolute;
    padding: 20px;
    background-color: #405580;
    border: 1px solid #fff;
    right: 20px;
    top: 60px;
    width: 50%;
    border-radius: 2px 0 2px 2px;
  }
  nav li {
    text-align: center;
    width:: 100%;
    padding: 10px 0;
    margin: 0;  
  }
  nav:hover ul {
    display: block; 
  }
}

Answer 1

根据docs，您需要在px之后添加478：

@media screen and (max-width: 478px) {
  body {
    position: absolute; 
  } 
}
@media screen and (max-width: 478px) {

Answer 2

首先关闭display: hidden; 不是一件事。您正在寻找display:none。

此外，您可以使用visibility: hidden; 或 visibility: visible;

如果对象设置为display：none。然后你想在特定的屏幕宽度再次显示它。您需要在媒体查询中更改该对象的显示值。

display:block;或display:inline-block; ，甚至在某些情况下 display:inline;

例如：

#menu-icon{
  display: none;
  width: 40px;
  height: 40px;
  background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}

@media screen and (max-width: 478px) {
#menu-icon{
  display: block;
  }
}

rezise后菜单图标不会显示

2 个答案: