当第一缕阳光漫过窗台，泡一杯温热的咖啡，坐在桌前享受这独属于自己的静谧时光。前端的小伙伴们，每天面对复杂的项目需求和紧张的面试压力，是不是偶尔也会感到疲惫？别担心，从今天起，让我们抓住清晨和上午这段黄金时间，用一道 CSS 高频面试题，开启元气满满的学习之旅，在知识的海洋里放松身心，稳步提升自己。

最近，“CSS 面试高频考点”“前端样式优化技巧”“CSS 实战应用” 等话题在技术圈热度居高不下，这些可都是面试官常问的 “杀手锏”。今天，我们就来拆解一道经典又实用的 CSS 面试题 ——如何用 CSS 实现一个自适应的导航栏，在不同屏幕尺寸下都能保持良好的显示效果？ 这道题看似简单，却藏着不少门道，掌握了它，能让你在面试时脱颖而出。

方法一：使用 Flex 布局结合媒体查询

Flex 布局在处理响应式设计时非常灵活，搭配媒体查询，可以轻松应对不同屏幕尺寸。

/* 导航栏容器，设置为Flex布局 */
nav {
display: flex;
/* 使导航项在主轴上均匀分布 */
justify-content: space-around;
/* 导航栏背景色 */
background-color: #333;
/* 文字颜色 */
color: white;
/* 内边距，调整导航项与边框的距离 */
padding: 10px;
}
/* 每个导航项 */
nav a {
/* 去除下划线 */
text-decoration: none;
color: white;
}
/* 媒体查询：当屏幕宽度小于600px时，改变布局 */
@media (max-width: 600px) {
nav {
/* 让导航项垂直排列 */
flex-direction: column;
}
nav a {
/* 每个导航项占据整行，增加点击区域 */
display: block;
/* 底部外边距，让导航项之间有间隔 */
margin-bottom: 5px;
}
}

在正常屏幕尺寸下，justify-content: space-around让导航项均匀分布；当屏幕变窄，通过媒体查询切换flex-direction为垂直排列，同时调整导航项的显示方式，确保小屏幕上也能轻松点击。

方法二：借助 Grid 布局和百分比单位

Grid 布局的强大之处在于它能精准控制元素的位置和大小，结合百分比单位，可以实现高度自适应的导航栏。

/* 导航栏容器，设置为Grid布局 */
nav {
display: grid;
/* 定义一列，宽度为100% */
grid-template-columns: 1fr;
/* 导航栏背景色 */
background-color: #444;
/* 文字颜色 */
color: white;
/* 内边距，调整导航项与边框的距离 */
padding: 10px;
}
/* 每个导航项 */
nav a {
text-decoration: none;
color: white;
/* 水平居中文字 */
text-align: center;
}
/* 媒体查询：当屏幕宽度大于600px时，改变布局 */
@media (min-width: 600px) {
nav {
/* 定义多列，根据需求分配空间 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}

初始状态下，导航项在单列中显示；当屏幕宽度达到 600px 及以上，grid-template-columns通过repeat(auto-fit, minmax(100px, 1fr))自动适配列数，每个导航项最小宽度为 100px，实现多列显示。

面试回答范本

当面试官问到自适应导航栏的实现，你可以这样回答：“实现自适应导航栏，我常用 Flex 布局和 Grid 布局两种方式。Flex 布局可以通过justify-content调整导航项分布，搭配媒体查询，在小屏幕时改变flex-direction为垂直排列；Grid 布局则利用grid-template-columns定义列的分布，结合百分比单位和媒体查询，根据屏幕尺寸自动调整列数。实际项目中，我会根据具体需求和团队技术栈选择合适的方案，比如更注重兼容性时选 Flex，追求精准布局就用 Grid。”

在开发响应式导航栏时，有人觉得 Flex 布局简单直观，也有人更偏爱 Grid 布局的强大功能。你在实际项目中，更喜欢用哪种方式实现自适应导航栏呢？ 欢迎在评论区分享你的经验和想法，让我们一起在交流中进步！如果今天的内容让你有所收获，别忘了点赞、关注，明天清晨，我们继续一起探索 CSS 的奇妙世界！