窗口缩放时Navbar文本重叠问题排查求助

从你提供的代码来看，Navbar在窗口缩小时出现文本重叠，核心问题出在大屏样式的布局灵活性不足、强制不换行设置，以及缺少过渡区间的适配逻辑上，下面是具体的排查和修复方案：

1. 移除强制不换行的限制 #

你在大屏样式的#nav_wrap中设置了white-space: nowrap;，这会强制导航栏内所有内容不换行，一旦窗口宽度不足以容纳所有文本，就会直接重叠。删掉这个属性即可解决最直接的重叠诱因：

#nav_wrap {
  background: #f9f4ea;
  width: 100%;
  /* 移除这行强制不换行的设置 */
  /* white-space: nowrap; */
  float: left;
  height: auto;
  position: relative;
  margin-top: 144px;
  bottom: 0;
  overflow: hidden;
  z-index: 00;
  opacity: .9;
  box-shadow: 0px 1px 4px beige;
  padding: 0;
}

2. 用Flexbox替换固定宽度的inline-block布局 #

大屏样式中#menu li使用inline-block+固定12%宽度的方式太僵硬，窗口缩小时12%的宽度不足以容纳文本。换成Flexbox布局可以让列表项自动分配空间，空间不足时还能自动换行：

/* 大屏媒体查询内的#menu样式修改 */
#menu {
  display: flex; /* 切换为flex布局 */
  flex-wrap: wrap; /* 空间不足时自动换行 */
  justify-content: center; /* 保持居中对齐 */
  border-radius: 0;
  position: relative;
  padding: 0;
  margin: 0;
}

#menu li {
  flex: 1 1 auto; /* 让列表项自动伸缩，最小宽度由内容决定 */
  min-width: 120px; /* 设置最小宽度，避免过度挤压 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  margin: 0;
  padding: 0;
}

#menu li a {
  font-size: 1rem; /* 使用相对单位，适配不同屏幕 */
  text-decoration: none;
  color: #505050;
  text-align: center;
  line-height: 75px;
  text-transform: uppercase;
  transition: all .4s ease;
  width: 100%;
  border-top: 5px solid #80bb80;
}

3. 补充中等屏幕的媒体查询断点 #

目前你的代码只有大屏和小屏两种状态，建议添加一个中等屏幕的过渡断点（比如768px-1023px），在这个区间调整字体大小和导航栏高度，进一步避免重叠：

@media screen and (min-width: 768px) and (max-width: 1023px) {
  #menu li a {
    font-size: 0.9rem; /* 缩小字体适配中等屏幕 */
    line-height: 60px; /* 降低导航栏高度 */
  }
  #mainlogo {
    width: 400px;
    margin-left: -200px;
    font-size: 28px; /* 同步缩小logo尺寸 */
  }
}

4. 确认大屏媒体查询的触发阈值 #

确保你的大屏媒体查询有明确的min-width触发条件，比如设置为1024px，这样在窗口宽度小于该值时，会平滑切换到中等屏幕或小屏样式：

/* 大屏媒体查询的正确写法示例 */
@media screen and (min-width: 1024px) {
  /* 你的大屏Navbar样式 */
}

这些修改后，你的Navbar在窗口缩放过程中会有更平滑的适配效果，Flexbox布局会自动利用可用空间，不会再出现文本重叠的问题，同时中等屏幕的断点也能优化过渡区间的显示体验。

内容的提问来源于stack exchange，提问作者Ginger