响应式导航菜单无法正常工作

Question

我正在尝试设计一个响应式导航栏。我对css3不太了解。除了平板电脑，导航栏工作正常。请帮我看看我缺少的平板电脑大小。我是否需要为平板电脑大小添加媒体查询？或任何改变需要导航标签做

<nav class="clearfix"> 
    <ul class="clearfix"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu1</a></li> 
    </ul> 
    <a href="#" id="pull">Menu</a> 
</nav> 

以下是一个导航的CSS

nav { 
    height: 40px; 
    width: 100%; 
    background: #455868; 
    font-size: 11pt; 
    font-family: 'PT Sans', Arial, sans-serif; 
    font-weight: bold; 
    position: relative; 
    border-bottom: 2px solid #283744; 
} 
nav ul { 
    padding: 0; 
    margin: 0 auto; 
    width: 80%; 
    height: 40px; 
} 
nav li { 
    display: inline; 
    float: left; 
} 
nav a { 
    color: #fff; 
    display: inline-block; 
    width: 100px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
    text-shadow: 1px 1px 0px #283744; 
} 
nav li a { 
    border-right: 1px solid #576979; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
nav li:last-child a { 
    border-right: 0; 
} 
nav a:hover, nav a:active { 
    background-color: #8c99a4; 
} 
nav a#pull { 
    display: none; 
} 

/*Styles for screen 600px and lower*/ 
@media screen and (max-width: 600px) { 
    nav { 
     height: auto; 
    } 
    nav ul { 
     width: 100%; 
     display: block; 
     height: auto; 
    } 
    nav li { 
     width: 50%; 
     float: left; 
     position: relative; 
    } 
    nav li a { 
     border-bottom: 1px solid #576979; 
     border-right: 1px solid #576979; 
    } 
    nav a { 
     text-align: left; 
     width: 100%; 
     text-indent: 25px; 
    } 
} 

/*Styles for screen 515px and lower*/ 
@media only screen and (max-width : 480px) { 
    nav { 
     border-bottom: 0; 
    } 
    nav ul { 
     display: none; 
     height: auto; 
    } 
    nav a#pull { 
     display: block; 
     background-color: #283744; 
     width: 100%; 
     position: relative; 
    } 
    nav a#pull:after { 
     content:""; 
     background: url('nav-icon.png') no-repeat; 
     width: 30px; 
     height: 30px; 
     display: inline-block; 
     position: absolute; 
     right: 15px; 
     top: 10px; 
    } 
} 

/*Smartphone*/ 
@media only screen and (max-width : 320px) { 
    nav li { 
     display: block; 
     float: none; 
     width: 100%; 
    } 
    nav li a { 
     border-bottom: 1px solid #576979; 
    } 
} 
.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 

Answer 1

你可以试试这个：http://jsfiddle.net/98jxL/2/

我添加了一个新的媒体查询最多到1000px。它会将您的菜单项均匀分布在屏幕宽度上。此解决方案基于您拥有8个菜单项。

/*Styles for screen 1000px and lower*/ 
@media screen and (max-width: 1000px) { 
    nav ul { 
     width: 100%; 
    } 

    nav li { 
     width: 12.5%; 
    } 

    nav a { 
     width: 100%; 
    } 
}