调整菜单取决于浏览器大小getskeleton

如何根据浏览器的大小调整导航的大小，就像我在下面通过互联网看到的导航一样，我使用getskeleton bootstrap使任何响应。这里是我的代码，调整菜单取决于浏览器大小getskeleton

<div class="m1 menu"> 
    <div id="menu-center"> 
     <ul> 
      <li><a class="active" href="#home">Home</a> 

      </li> 
      <li><a href="#portfolio">Portfolio</a> 

      </li> 
      <li><a href="#about">About</a> 

      </li> 
      <li><a href="#contact">Contact</a> 

      </li> 
      <li><a href="#test">test</a> 

      </li>    
     </ul> 
    </div> 
</div>

CSS文件

.menu { 
    width: 100%; 
    height: 75px; 
    background-color: rgba(0, 0, 0, 1); 
    position: fixed; 
    background-color:rgba(4, 180, 49, 0.6); 
    z-index: 99; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 
.light-menu { 
    width: 100%; 
    height: 75px; 
    background-color: rgba(255, 255, 255, 1); 
    position: fixed; 
    background-color:rgba(4, 180, 49, 0.6); 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 
#menu-center { 
    width: 980px; 
    height: 75px; 
    margin: 0 auto; 
} 
#menu-center ul { 
    margin: 15px 0 0 0; 
} 
#menu-center ul li { 
    list-style: none; 
    margin: 0 30px 0 0; 
    display: inline; 
} 
.active { 
    font-family:'Droid Sans', serif; 
    font-size: 14px; 
    color: #fff; 
    text-decoration: none; 
    line-height: 50px; 
} 
a { 
    font-family:'Droid Sans', serif; 
    font-size: 14px; 
    color: black; 
    text-decoration: none; 
    line-height: 50px; 
}

而结果 enter image description here