响应式搜索框优化：避免与Logo重叠，实现屏幕适配宽度调整

要实现搜索栏不与Logo重叠且随屏幕尺寸自适应缩放，核心是优化Flex布局逻辑，给元素设置合理的尺寸约束，以下是具体调整方案：

1. 修改CSS代码（关键调整） #

替换原CSS为以下代码，解决固定宽度导致的重叠和自适应问题：

.header {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直居中对齐所有元素 */
  padding: 20px 10px;
  background: white;
  gap: 10px; /* 用gap控制Logo和搜索栏的间距，比padding更规范 */
}

.header h1 {
  font-size: 30px;
  /* 移除固定width:30%，让Logo容器根据图片内容自动调整宽度 */
  white-space: nowrap; /* 防止Logo旁的文字（如果有）换行挤压 */
}

.header h1 img {
  max-width: 100%; /* 确保Logo图片不会超出容器范围 */
  height: auto;
}

.header form {
  display: flex;
  flex: 1; /* 让表单占据header中除Logo外的所有剩余空间 */
  gap: 0; /* 消除搜索栏和按钮之间的缝隙 */
}

#search-bar {
  flex: 1; /* 让搜索栏填满表单内的剩余空间 */
  min-width: 200px; /* 设置最小宽度，避免小屏幕下过窄无法输入 */
  max-width: 600px; /* 设置最大宽度，避免大屏幕下过度拉伸 */
  height: 40px;
  font-size: 1rem;
  border: 1px solid #D0CFCE;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 0 15px; /* 增加内边距，提升输入体验 */
}

#search-button {
  height: 40px;
  font-size: 1rem;
  border: 1px solid #D0CFCE;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 0 20px; /* 扩大按钮点击区域 */
  cursor: pointer;
}

2. 调整逻辑说明 #

• 移除Logo容器（.header h1）的固定宽度，让它根据Logo内容自适应，避免强行占用空间导致小屏幕拥挤重叠
• 给表单设置flex:1，确保搜索区域能充分利用header的剩余宽度
• 给搜索栏设置flex:1实现自动拉伸，同时用min-width和max-width限制尺寸范围，兼顾小屏和大屏体验
• 用gap替代零散的padding，统一控制元素间距，布局更整洁

3. 可选：小屏幕垂直布局优化 #

如果需要针对手机等小屏幕做更友好的适配，可添加媒体查询：

@media (max-width: 768px) {
  .header {
    flex-direction: column; /* 小屏幕下Logo和搜索栏垂直排列 */
    gap: 15px;
  }
  
  #search-bar {
    min-width: 100%; /* 小屏幕下搜索栏填满容器宽度 */
  }
}

内容的提问来源于stack exchange，提问作者static-man