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

逃离我推掉我的手 2023-03-02 10:52 2阅读 0赞

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

HTML部分：

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

**<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
<meta http-equiv="X-UA-Compatible" content="ie=edge">**

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="index.css">
        <title>自适应首页</title>
    </head>
    <body>
    <header>
        <nav>
             <div class="menu">
                 <ul>
                     <li class="active"><a href="#">首页</a></li>
                     <li><a href="#">栏目一</a></li>
                     <li><a href="#">栏目二</a></li>
                     <li><a href="#">栏目三</a></li>
                     <li><a href="#">栏目四</a></li>
                     <li><a href="#">栏目五</a></li>
                     <li><a href="#">栏目六</a></li>
                 </ul>
             </div>
        </nav>
    </header>
    <main>
    测试
    </main>
    
    </body>
    </html>

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部分再进行优化。