创建了一个导航栏,其中包含8个列表项。CSS样式定义了导航栏的基本样式,并使用媒体查询来调整不同分辨率下的布局:
当屏幕宽度大于1200px时,默认显示8列。
当屏幕宽度在1200px到992px之间时,导航栏变为4列。
当屏幕宽度在992px到768px之间时,导航栏变为3列。
当屏幕宽度在768px到576px之间时,导航栏变为2列。
当屏幕宽度小于576px时,导航栏完全隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<style>
body {
font-family: Arial, sans-serif;
}
nav {
display: flex;
background-color: #f8f9fa;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
nav li {
margin: 0 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
}
/* 媒体查询:当屏幕宽度小于1200px时,显示4列 */
@media (max-width: 1199px) {
nav ul {
flex-wrap: wrap;
}
nav li {
flex: 1 0 25%; /* 4列 */
}
}
/* 媒体查询:当屏幕宽度小于992px时,显示3列 */
@media (max-width: 991px) {
nav li {
flex: 1 0 33.33%; /* 3列 */
}
}
/* 媒体查询:当屏幕宽度小于768px时,显示2列 */
@media (max-width: 767px) {
nav li {
flex: 1 0 50%; /* 2列 */
}
}
/* 媒体查询:当屏幕宽度小于576px时,不显示导航栏 */
@media (max-width: 575px) {
nav {
display: none;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>关于我们</li>
<li>联系方式</li>
<li>支持</li>
<li>博客</li>
<li>新闻</li>
</ul>
</nav>
<p>页面内容...</p>
</body>
</html>