Question

我试图制作一个响应式网站，但是当我将屏幕缩小时，菜单按钮没有显示。这是我的CSS代码。

我非常擅长使网站响应，对于这个可能很简单的问题感到抱歉，但我真的无法在其他任何地方找到它。

这是我的HTML，我找到菜单按钮和普通菜单

@media only screen and (max-width: 1024px) 
{ 

header
{
    width: 95%;
}

#content
{
    width: 95%;
}

img
{
    width: 95%;
}

}

@media only screen and (max-width: 980px) 
{ 

#menu
{
    display: none;
}

.menubutton
{
    display: block;
}

}

.menubutton
{
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 20px;
    right: 0;
    display: none;
}

<div class="inner">
    <h2>JARI</h2>
    <nav>
        <ul id="menu">
            <li>Home</li>
            <li>|</li>
            <li>Over Mij</li>
            <li>|</li>
            <li>Ervaringen</li>
            <li>|</li>
            <li>Projecten</li>
            <li>|</li>
            <li>Ervaringen</li>
            <li>|</li>
            <li>Contact</li>
        </ul>
    </nav>
    <img src="menu.png" class="menubutton" alt="menuknop">
</div>

Answer 1

更改css位置

 @media (max-width: 1024px) 
{ 

header
{
    width: 95%;
}

#content
{
    width: 95%;
}

img
{
    width: 95%;
}

}
.menubutton
{
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 20px;
    right: 0;
    display: none;
}
@media (max-width: 980px) 
{ 

#menu
{
    display: none;
}

.menubutton
{
    display: block;
}

}

Answer 2

CSS从上到下依次读取。在您的媒体查询中，您要将.menubutton设置为display：block，然后在下一个代码块中显示：none

由于您只在980px下显示menubutton，因此整个CSS可以进入媒体查询

* edit - 需要将其初始值设置为display：none;遗憾

http://jsfiddle.net/bvdgw9vc/

@media only screen and (max-width: 1024px){ 

  header{
      width: 95%;
  }
  #content{
      width: 95%;
  }
  img{
      width: 95%;
  }
}

.menubutton {
   display: none;
}
@media only screen and (max-width: 980px) { 

  #menu{
      display: none;
  }
  .menubutton{
      display: block;
      width: 40px;
      height: 40px;
      position: absolute;
      bottom: 20px;
      right: 0;
  }

}

在缩小屏幕时显示菜单按钮

2 个答案: