React+CSS导航栏屏幕缩小时右侧消失，求响应式改造方案

问题原因 #

你的导航栏在小屏状态下右侧内容消失，核心问题是.home-header中错误设置了min-width: 100vh——vh是视口高度单位，当屏幕宽度小于高度时，这个属性会强制导航栏宽度等于视口高度，超出屏幕宽度的部分会被隐藏，导致右侧内容无法显示。

修复方案 #

1. 修正基础布局 #

首先替换错误的宽度属性，添加盒模型重置避免布局溢出：

修改后的完整CSS #

/* 全局盒模型重置，避免默认边距/内边距干扰布局 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home-header {
  position: sticky;
  padding: 1.5rem;
  margin-top: 0;
  width: 100%; /* 替换原有的min-width: 100vh */
  background-color: #1441aa;
  border-bottom-right-radius: 30px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; /* 垂直居中内容，优化视觉效果 */
}

.home-header .auth-buttons {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.home-header .auth-buttons .auth-button {
  padding: 0.5rem 1.5rem;
  border: none;
  transition: opacity 0.2s ease; /* 添加hover过渡动画 */
}

.home-header .auth-buttons .auth-button:hover {
  cursor: pointer;
  opacity: 0.9;
}

.home-header .auth-buttons .sign-up-button {
  border-bottom-left-radius: 1rem;
}

.home-header .menus-container {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 给汉堡图标添加间距 */
}

/* 补全汉堡图标的样式 */
.home-header .menus-container span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
}

.home-header .auth-buttons .login-button {
  border-top-right-radius: 1rem;
}

/* 响应式媒体查询：小屏适配 */
@media (max-width: 600px) {
  .home-header {
    padding: 1rem; /* 缩小内边距，节省空间 */
  }
  
  .home-header .auth-buttons .auth-button {
    padding: 0.4rem 1rem; /* 缩小按钮尺寸 */
    font-size: 0.9rem; /* 缩小按钮文字 */
  }
  
  .home-header .menus-container {
    font-size: 1.2rem; /* 缩小网站名称字体 */
  }
  
  .home-header .menus-container span {
    width: 20px; /* 缩小汉堡图标 */
    height: 2.5px;
  }
}

2. 优化后的React代码（结构更清晰） #

<header className="home-header">
  <div className="auth-buttons">
    <input type="button" className="auth-button sign-up-button" value="Sign Up" />
    <input type="button" className="auth-button login-button" value="Login" />
  </div>
  <div className="menus-container">
    My Site
    <span></span>
    <span></span>
    <span></span>
  </div>
</header>

核心调整说明 #

• 替换min-width: 100vh为width: 100%，配合box-sizing: border-box确保导航栏始终适配屏幕宽度，不会溢出
• 添加align-items: center让导航栏内容垂直居中，提升视觉一致性
• 补全汉堡图标的样式，让它在所有屏幕下正常显示
• 通过媒体查询在小屏时动态缩小内边距、字体和按钮尺寸，确保内容完整适配
• 添加全局盒模型重置，消除浏览器默认样式的干扰

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