Header 和 Footer 在桌面端显示正常，但在小屏幕下宽度收缩、内容溢出，导致无法 100% 填满视口宽度。根本原因是 Flex 容器未处理换行与溢出，需通过 flex-wrap: wrap 和 overflow: hidden 配合响应式优化解决。
header 和 footer 在桌面端显示正常，但在小屏幕下宽度收缩、内容溢出，导致无法 100% 填满视口宽度。根本原因是 flex 容器未处理换行与溢出，需通过 `flex-wrap: wrap` 和 `overflow: hidden` 配合响应式优化解决。
在构建响应式网页时，Header 和 Footer 经常被误认为“只要设了 width: 100% 就必然铺满全屏”，但实际中，Flex 布局的默认行为（flex-wrap: nowrap）会强制子元素单行排列，当总宽度超出容器时，浏览器会扩大父容器以容纳内容——这直接破坏了 width: 100% 的视觉效果，尤其在移动端触发横向滚动或内容截断。
✅ 正确解决方案：两步核心修复
1. 启用 Flex 换行，防止内容溢出
为 .header 和 .footer 添加 flex-wrap: wrap，允许子项在空间不足时自动折行，避免强制拉伸容器：
.header {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: space-evenly;
background-color: aqua;
margin-top: 0.5rem;
flex-wrap: wrap; /* ← 关键：允许子元素换行 */
}
.footer {
display: flex;
flex-direction: column;
width: 100%;
background-color: #3C4242;
color: #F6F6F6;
overflow: hidden; /* ← 关键：裁剪潜在溢出，保障视觉完整性 */
}? 注意：
.footer虽为column方向，但其子容器（如.info）是row布局且含多列，同样可能因justify-content: space-evenly在窄屏下产生过大间隙或溢出，因此overflow: hidden是必要兜底。
2. 补充移动端适配（推荐增强）
仅靠 flex-wrap 不足以提供良好小屏体验。建议添加媒体查询，针对移动设备优化间距与字体：
@media (max-width: 768px) {
.header {
padding: 0.5rem 1rem;
}
.left-title {
font-size: 1.5rem;
}
.middle .link {
margin-left: 1.5rem;
font-size: medium;
}
.right span {
margin: 0 0.5rem;
}
.info {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.info > div {
text-align: center;
}
}3. 不可忽视的基础保障
确保 HTML 文档具备正确响应式元标签（已存在，但务必检查）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
同时，全局重置 body 的 margin 和 padding（你已正确设置），避免浏览器默认边距干扰布局。
⚠️ 常见误区提醒
- ❌ 错误依赖
!important强制宽度（如.footer { width: 100% !important }）：无法解决溢出本质问题； - ❌ 忽略
box-sizing: border-box对内边距/边框的影响（你已设置，很好）； - ❌ 仅用媒体查询“覆盖宽度”而不处理 Flex 溢出逻辑：治标不治本；
- ❌ 在
.middle或.right中使用固定margin-right（如5rem）：在小屏下极易造成右侧溢出。
✅ 最终验证要点
- 在 Chrome DevTools 中切换至「Responsive」模式，拖动宽度从 1200px 逐步缩至 320px；
- 观察 Header 是否自动换行（Logo、导航、操作区分层堆叠）；
- 检查 Footer 是否无横向滚动条，且
.info区域在窄屏下垂直排列、居中对齐； - 使用「Elements」面板审查
.header和.footer计算后的width是否稳定为100vw。
通过以上结构化调整，Header 和 Footer 将真正实现语义上与视觉上的一致性全宽响应——无论屏幕尺寸如何变化，它们始终作为稳固的顶部与底部边界，为内容区域提供可靠支撑。
