响应式页眉页脚布局需使用Flexbox、Grid和媒体查询实现。页眉通过Flexbox使Logo左对齐、导航居中或右对齐，移动端用媒体查询隐藏菜单并显示汉堡按钮；页脚用Flexbox或Grid在桌面端多列布局，移动端堆叠为单列，调整字体与间距提升可读性，并可隐藏次要内容；粘性页脚利用Flexbox将body设为列容器，main区域占满剩余空间，确保内容少时页脚仍贴底。示例代码展示了header、nav、footer的样式及断点处理。合理运用这些技术可构建美观稳定的响应式布局。
响应式页眉页脚布局是现代网页设计的基础部分，确保页面在不同设备上都能保持良好的视觉效果和用户体验。实现这一目标的关键在于使用灵活的CSS布局技术，如Flexbox、Grid以及媒体查询。
页眉（Header）布局实现
页眉通常包含网站Logo、主导航菜单和可能的操作按钮（如搜索或用户登录）。为了实现响应式，可以采用以下方式：
- 使用Flexbox布局：让Logo居左，导航居中或靠右，并在小屏幕上折叠为汉堡菜单。
- 设置视口单位：使用max-width: 100%和flex-wrap保证内容不会溢出。
- 移动端适配：通过媒体查询隐藏大屏导航，显示可点击展开的侧边栏或下拉菜单。
示例代码片段：
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #333;
color: white;
}
<p>nav ul {
display: flex;
list-style: none;
}</p><p>@media (max-width: 768px) {
nav ul {
display: none; /<em> 隐藏默认菜单 </em>/
}
.menu-toggle {
display: block; /<em> 显示汉堡按钮 </em>/
}
}</p>页脚（Footer）响应式处理
页脚常包含版权信息、链接列表、社交媒体图标等。响应式设计应确保内容在小屏幕上垂直堆叠，易于阅读。
立即学习“前端免费学习笔记（深入）”；
- 使用CSS Grid或Flexbox：在桌面端并排显示多列内容，在移动端自动换行为单列。
- 字体与间距调整：小屏幕下减小字体、增加行距，提升可读性。
- 隐藏非关键元素：例如在手机上隐藏次要链接，保留核心信息。
示例结构：
footer {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 2rem;
background: #222;
color: #ccc;
}
<p>.footer-column {
flex: 1;
min-width: 150px;
}</p><p>@media (max-width: 600px) {
.footer-column {
min-width: 100%;
}
}</p>粘性页脚（Sticky Footer）技巧
当页面内容较少时，页脚容易“悬”在中间。使用CSS轻松实现页脚始终位于视窗底部。
- Flexbox容器包裹主内容：将body设为flex容器，主区域flex: 1占满剩余空间。
- HTML结构建议：包含header、main、footer三个直接子元素。
实现方式：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
<p>main {
flex: 1;
}</p>基本上就这些。合理运用Flexbox、媒体查询和语义化结构，就能构建出稳定且美观的响应式页眉页脚。不复杂但容易忽略细节。
