Self-made HTML5+CSS3 mobile terminal adaptive menu navigation, using flexible box layout and media query syntax.
HTML part:
Note that the adaptive meta syntax must be written:
<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 part:
*{
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;
}
}
A simple adaptive navigation is successful. The css part here uses the media query syntax to set the menu navigation font to 0.5em when the minimum screen is between 310px and 568px, to achieve font reduction and prevent fonts from shrinking with the page. The overall effect of line wrapping and incomplete display is coming out, but it still doesn’t look very beautiful, and we need to continue to optimize the CSS part.