响应式头部导航需要同时应对布局与交互的变化。桌面端视口宽裕，可以把Logo、链接项和操作按钮放在同一行；移动端屏幕窄，横向排列容易造成挤占，更合适的方式是默认收起链接，只展示一个触控按钮。Flexbox适合管理一维排列与空间分配，媒体查询则负责在断点处切换横向与纵向规则。本文以一个包含Logo、导航列表和折叠按钮的结构为例，逐步说明从HTML骨架到桌面端、移动端样式的完整实现，并补充可访问性与触控经验。
设计语义化的HTML结构
第一步是搭建结构清晰、语义合理的HTML骨架。头部容器使用<header>元素，内部的<nav>负责承载主要导航链接，链接用<ul>和<li>组织。这样做不仅能提升可读性，也让屏幕阅读器能够更准确地识别导航区域。
折叠按钮可以有两种实现方式：使用隐藏的<input type="checkbox">配合<label>实现纯CSS状态控制，或者使用原生<button>配合JavaScript切换类名。本文的演示结构先采用checkbox方案，减少依赖；后面小节会给出可访问性更好的按钮方案。基础结构如下：
<header class="site-header">
<div class="header-inner">
<a href="/" class="logo">Logo</a>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav class="main-nav">
<ul class="nav-list">
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/blog">博客</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</div>
</header>
这个结构中，<label>的for属性与复选框的id对应，因此用户可以点击汉堡图标间接切换复选框状态。后续只需要通过CSS的:checked伪类判断展开或收起。导航链接放在<ul>中，容器使用header-inner类方便限制最大宽度。
用Flexbox组织桌面端布局
桌面端的默认布局应当让Logo靠左，导航链接靠右或居中，所有元素在垂直方向对齐。将.header-inner设置为display: flex后，子元素会沿主轴水平排列，再利用justify-content: space-between把首尾元素推向两端。当容器内只有Logo和导航时，这种方案能让Logo贴左、导航贴右；如果中间还有搜索框，也可以改为justify-content: flex-start并利用margin-left: auto将右侧元素推到末尾。
导航列表同样要变成Flex容器。<ul>的默认列表样式需要重置，然后设置display: flex，列表项就会自动横向排列。使用gap: 24px统一控制项间距，比给每个<li>加margin-right更直观，也不容易在最后一个元素处多余留白。隐藏复选框和切换按钮的样式可以在桌面端默认状态下写为display: none。
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #222;
}
.nav-list {
display: flex;
list-style: none;
gap: 24px;
margin: 0;
padding: 0;
}
.nav-list a {
text-decoration: none;
color: #444;
}
.nav-toggle,
.nav-toggle-label {
display: none;
}
这里的align-items: center让Logo和导航在交叉轴方向保持居中。即使Logo高度与链接不一致，也不会出现底部错位。justify-content: space-between负责主轴分布，它会在子元素之间分配空白。需要注意的是，如果将来在.header-inner内添加多个子元素，space-between会等间距分布所有元素，此时可能需要调整。
用媒体查询实现移动端折叠
当视口宽度缩小到一定程度，桌面端的横向导航没有足够空间展示全部链接，此时需要通过媒体查询切换布局。断点通常可以设为max-width: 768px，但更合理的做法是实际调整浏览器宽度，观察导航从哪一宽度开始换行或挤压，再确定具体数值。媒体查询内部只写移动端需要覆盖的属性，桌面端已有的规则仍然保留。
在@media块中，首先将汉堡按钮显示出来，并让头部容器允许换行。导航链接需要从横向排列改为纵向排列，所以把.nav-list的flex-direction设为column。为了做出平滑展开效果，将.main-nav的max-height从0过渡到较大的值，同时用overflow: hidden裁切内容。当复选框被勾选时，通过相邻兄弟选择器把容器高度打开。
@media (max-width: 768px) {
.header-inner {
flex-wrap: wrap;
padding: 12px 16px;
}
.nav-toggle-label {
display: flex;
flex-direction: column;
justify-content: center;
width: 28px;
height: 24px;
cursor: pointer;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
height: 2px;
width: 100%;
background: #333;
border-radius: 2px;
transition: transform 0.3s ease;
}
.nav-toggle-label span {
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
left: 0;
}
.nav-toggle-label span::before {
top: -8px;
}
.nav-toggle-label span::after {
top: 8px;
}
.nav-toggle:checked + .nav-toggle-label span {
background: transparent;
}
.nav-toggle:checked + .nav-toggle-label span::before {
transform: translateY(8px) rotate(45deg);
}
.nav-toggle:checked + .nav-toggle-label span::after {
transform: translateY(-8px) rotate(-45deg);
}
.main-nav {
width: 100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.nav-toggle:checked ~ .main-nav {
max-height: 400px;
}
.nav-list {
flex-direction: column;
gap: 0;
padding: 16px 0;
}
.nav-list li {
border-bottom: 1px solid #eee;
}
.nav-list a {
display: block;
padding: 12px 8px;
}
}
上述代码的汉堡按钮仅用一个<span>和两个伪元素绘制三条横线。当复选框选中时，<span>的背景变为透明，上下两条横线分别旋转形成叉号，视觉反馈清晰。max-height过渡的优势是无需JavaScript就能工作，但它需要预先设置一个足够大的高度值。如果导航项数量变化或链接过长，max-height可能不够，导致内容被截断；设置过大又会让收起动画出现延迟。对于内容高度动态变化的场景，建议改为JavaScript控制类名，再结合grid-template-rows实现更精准的展开。
增强可访问性与触控体验
响应式导航不仅要看起来合理，还要对所有用户可用。屏幕阅读器需要了解按钮当前是展开还是收起状态，这通常通过aria-expanded属性表达；同时按钮还可以用aria-controls指向被控制的导航区域。纯CSS的checkbox方案虽然能维持视觉状态，但语义上不如原生按钮清晰。生产环境更建议用<button>配合少量JavaScript来切换菜单。
触控区域大小同样关键。移动端用户手指点击精度低于鼠标，链接或按钮过小时容易误触。将移动端导航链接设置为display: block并增加约12像素的上下内边距，可以让整行都成为点击目标，而不只是文字本身。对于动画效果，应当尊重用户的系统设置，通过prefers-reduced-motion关闭或缩短过渡时间。
<button class="nav-toggle-button" aria-expanded="false" aria-controls="main-navigation">
<span class="sr-only">切换菜单</span>
<span class="hamburger"></span>
</button>
<nav id="main-navigation" class="main-nav">
<ul class="nav-list">
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/services">服务</a></li>
</ul>
</nav>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.main-nav.is-open {
max-height: 400px;
}
const toggleBtn = document.querySelector('.nav-toggle-button');
const mainNav = document.querySelector('.main-nav');
toggleBtn.addEventListener('click', function () {
const isOpen = mainNav.classList.toggle('is-open');
toggleBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
上面的按钮方案通过classList.toggle切换is-open类，再配合CSS控制max-height或display状态。屏幕阅读器可通过aria-expanded的变化获取准确信息。若希望进一步减少动画对敏感用户的干扰，可以在媒体查询中加入以下规则：
@media (prefers-reduced-motion: reduce) {
.main-nav,
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
transition: none;
}
}
综合来看，Flexbox负责同一行或同一列中的排列逻辑，媒体查询负责在不同视口宽度下切换这些排列逻辑。两者组合后，响应式头部导航的开发成本会明显降低，结构也更易维护。实际项目中可以根据设计稿调整断点、间距和色彩变量，但核心思路保持一致。