CSS响应式导航栏文字与图标比例调整_font-size与媒体查询

通过结合font-size动态调整与媒体查询，根据不同设备尺寸优化文字与图标显示。移动端（1024px）恢复常规尺寸；使用vertical-align: middle确保图标与文字垂直居中；采用rem或em相对单位提升弹性，使导航栏在各屏幕下均保持良好布局与可读性。

在制作响应式导航栏时，文字与图标的比例协调直接影响用户体验。屏幕变小后，若字体过大或图标错位，会导致布局混乱。核心解决方式是结合 font-size 动态调整和 媒体查询（media queries），根据不同设备尺寸优化显示效果。

使用媒体查询适配不同屏幕

通过媒体查询，可以针对不同设备设定特定的字体大小和图标尺寸，确保在手机、平板和桌面端都能合理展示。

• 移动端（通常小于768px）：缩小 font-size，避免文字撑出容器
• 平板（768px ~ 1024px）：适度调整图标与文字间距
• 桌面端（大于1024px）：恢复正常尺寸，提升可读性

示例代码：

@media (max-width: 768px) {
  .nav-item {
    font-size: 14px;
  }
  .nav-icon {
    font-size: 16px;
    margin-right: 8px;
  }
}
@media (max-width: 480px) {
.nav-item {
font-size: 12px;
}
.nav-icon {
font-size: 14px;
margin-right: 6px;
}
}

图标与文字垂直对齐

当 font-size 变化时，图标与文字容易出现上下偏移。使用 vertical-align 可修复错位问题。

建议设置：

.nav-icon {
  vertical-align: middle;
}
.nav-text {
  vertical-align: middle;
  font-size: 14px;
}

这样即使在不同 font-size 下，图标与文字也能保持居中对齐。

使用相对单位增强弹性

相比 px，使用 em 或 rem 作为 font-size 单位更利于响应式设计。

• rem 相对于根元素（html）字体大小，适合全局统一控制
• em 相对于父元素，适合局部微调
• 例如：设置 html 字体为 16px，后续用 rem 调整更灵活

示例：

html {
  font-size: 16px;
}
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
}
.nav-item {
  font-size: 0.875rem; /* 14px */
}

基本上就这些。合理设置 font-size 配合媒体查询，再注意对齐和单位选择，就能让导航栏在各种设备上都看起来舒服自然。