17370845950

通过媒体查询在小屏幕隐藏文字仅显示图标，大屏幕同时显示图标和文字；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 对齐文本