响应式页眉页脚布局需使用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;
}
nav ul {
display: flex;
list-style: none;
}
@media (max-width: 768px) {
nav ul {
display: none; / 隐藏默认菜单 /
}
.menu-toggle {
display: block; / 显示汉堡按钮 /
}
}
页脚（Footer）响应式处理
页脚常包含版权信息、链接列表、社交媒体图标等。响应式设计应确保内容在小屏幕上垂直堆叠，易于阅读。
立即学习“前端免费学习笔记（深入）”；
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
- 使用CSS Grid或Flexbox：在桌面端并排显示多列内容，在移动端自动换行为单列。
- 字体与间距调整：小屏幕下减小字体、增加行距，提升可读性。
- 隐藏非关键元素：例如在手机上隐藏次要链接，保留核心信息。
示例结构：
footer {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 2rem;
background: #222;
color: #ccc;
}
.footer-column {
flex: 1;
min-width: 150px;
}
@media (max-width: 600px) {
.footer-column {
min-width: 100%;
}
}
粘性页脚（Sticky Footer）技巧
当页面内容较少时，页脚容易“悬”在中间。使用CSS轻松实现页脚始终位于视窗底部。
- Flexbox容器包裹主内容：将body设为flex容器，主区域flex: 1占满剩余空间。
- HTML结构建议：包含header、main、footer三个直接子元素。
实现方式：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex: 1;
}
基本上就这些。合理运用Flexbox、媒体查询和语义化结构，就能构建出稳定且美观的响应式页眉页脚。不复杂但容易忽略细节。
