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 调整更灵活
16px，后续用 rem 调整更灵活示例：
html {
font-size: 16px;
}
@media (max-width: 480px) {
html {
font-size: 14px;
}
}
.nav-item {
font-size: 0.875rem; /* 14px */
}
基本上就这些。合理设置 font-size 配合媒体查询，再注意对齐和单位选择，就能让导航栏在各种设备上都看起来舒服自然。
