通过媒体查询在小屏幕隐藏文字仅显示图标，大屏幕同时显示图标和文字；2. 使用Flex布局实现导航项自适应排列与对齐；3. 采用相对单位和SVG等高设置确保图标响应式缩放。
在移动端和桌面端都能良好显示的导航栏，关键在于图标与文字的合理适配。响应式设计中，图标的大小、位置以及是否显示文字，都需要根据屏幕尺寸动态调整。
使用媒体查询控制显示方式
通过CSS媒体查询，可以针对不同屏幕宽度设置不同的样式。常见做法是在小屏幕上只显示图标，在大屏幕上同时显示图标和文字。
示例：
.nav-item {
display: flex;
align-items: center;
font-size: 14px;
}
.nav-icon {
width: 20px;
height: 20px;
margin-right: 8px;
}
@media (max-width: 768px) {
.nav-text {
display: none;
}
.nav-icon {
margin-right: 0;
}
}
使用Flex布局实现自适应排列
Flex布局能帮助图标和文字在容器内自动对齐和换行，尤其适合导航栏这种横向结构。
立即学习“前端免费学习笔记（深入）”；
建议设置导航项为flex容器，让内容居中对齐，并在窄屏时允许换行或隐藏文字。
- 设置父容器 display: flex
- 使用 flex-wrap: wrap 允许换行（可选）
- 用 justify-content: space-around 分布导航项
图标字体或SVG的响应式处理
无论使用iconfont还是SVG图标，都应确保其尺寸随屏幕变化而缩放。
推荐使用相对单位（如em、rem）定义图标大小，以便跟随文字一起缩放。
- 避免固定像素值（如20px），改用1.2em
- 对SVG设置 width: 1em; height: 1em;，使其与文字等高
- 配合 vertical-align: middle 对齐文本
