自制HTML5+CSS3移动端自适应菜单导航

自己自制HTML5+CSS3的移动端自适应菜单导航，用到弹性盒子布局及媒体查询语法。

HTML部分：

注意必须写入自适应meta语法：   

    
    
    
    
    



    

         

             

                 
首页
                 
栏目一
                 
栏目二
                 
栏目三
                 
栏目四
                 
栏目五
                 
栏目六
             
         
    


测试

css部分：

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
.menu{
    height: 2em;
    background-color:darkgreen;
    display: flex;
}
.menu ul{
    display: flex;
    list-style: none;
    align-content: space-evenly;
    margin: 5px 10px;
}
.menu ul li {
    padding: 0px 5px;
}
.menu ul li .active a{
    color: orangered;
}

.menu ul li a {
    color: white;
    line-height: 2em;
    text-align: center;

}
.menu ul li a:hover,a:active {
    color: orangered;
    background-color:green;
}

@media only screen and (min-width: 310px) and (max-width: 568px){
    .menu{
        font-size:0.5em;
    }
}

一个简单的自适应导航就成功了，这里的css部分利用了媒体查询语法设置了在屏幕最小310px到568px之间时菜单导航的字体为0.5em，实现字体缩小，防止字体随着页面的缩小而换行以及显示不完整的问题，总体效果是出来了，但看上去还不是很美观，还需继续对CSS部分再进行优化。