实现HTML/CSS导航栏随窗口缩放自适应响应，核心是利用弹性布局和媒体查询配合调整不同屏幕尺寸下的样式规则，让导航元素能根据可用空间自动调整排列方式和尺寸。
基础HTML结构搭建
首先我们需要构建导航栏的基础HTML结构，包含导航容器和内部的导航项，结构尽量简洁语义化：
<nav class="navbar">
<div class="logo">站点LOGO</div>
<ul class="nav-list">
<li class="nav-item"><a href="#">首页</a></li>
<li class="nav-item"><a href="#">产品</a></li>
<li class="nav-item"><a href="#">服务</a></li>
<li class="nav-item"><a href="#">关于我们</a></li>
<li class="nav-item"><a href="#">联系我们</a></li>
</ul>
<div class="menu-toggle">菜单</div>
</nav>
核心CSS样式实现
基础样式与flexbox布局
使用flexbox可以让导航容器内的元素自动分配空间，当窗口缩小时，元素会自动调整间距或者换行，避免溢出：
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #333;
color: #fff;
}
.nav-list {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-item a {
color: #fff;
text-decoration: none;
font-size: 1rem;
padding: 0.5rem 0;
}
.menu-toggle {
display: none; /* 桌面端隐藏菜单切换按钮 */
cursor: pointer;
}
媒体查询适配小屏幕
当窗口宽度小于768px时，通常是平板或者手机设备，我们需要调整导航的排列方式，把导航项改为垂直排列，同时显示菜单切换按钮：
/* 屏幕宽度小于768px时的样式 */
@media screen and (max-width: 768px) {
.nav-list {
display: none; /* 默认隐藏导航项 */
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: #333;
padding: 1rem 2rem;
gap: 1rem;
}
.menu-toggle {
display: block; /* 显示菜单切换按钮 */
}
/* 点击切换按钮后显示导航项的类 */
.nav-list.active {
display: flex;
}
}
交互逻辑实现
为了让移动端的菜单切换按钮生效，我们需要添加简单的JavaScript逻辑，点击按钮时切换导航项的显示状态：
// 获取菜单切换按钮和导航列表元素
const menuToggle = document.querySelector('.menu-toggle');
const navList = document.querySelector('.nav-list');
// 点击按钮时切换导航列表的active类
menuToggle.addEventListener('click', () => {
navList.classList.toggle('active');
});
常见适配优化点
- 可以给导航项添加
flex-shrink: 0属性，避免重要元素在缩小时被过度压缩 - 如果导航项过多，可以在更小的屏幕宽度下进一步调整字体大小和间距
- 可以给导航容器添加
flex-wrap: wrap属性，让元素在空间不足时自动换行，不需要隐藏导航项 - 测试时可以通过浏览器开发者工具的响应式模式，查看不同宽度下的显示效果，调整媒体查询的断点值
适配效果说明
完成以上配置后，当窗口宽度大于768px时，导航栏会水平排列所有元素，LOGO在左侧，导航项在中间，菜单按钮隐藏。当窗口缩小到768px以下时，导航项会自动隐藏，显示菜单切换按钮，点击按钮可以展开垂直排列的导航项，实现不同窗口尺寸下的自适应响应效果。