如何通过Media Queries让搜索框在小屏幕下移至Logo下方？

Hey Jon，我来帮你搞定这个响应式布局的调整！要让搜索框在屏幕缩小的时候从Logo左侧移到下方，咱们可以借助Flexbox来轻松实现，比用float更简洁灵活。

步骤1：完善基础布局CSS #

首先确保Logo和搜索框的父容器使用Flex布局，这样默认桌面端能横向排列：

/* 默认桌面端布局：Logo与搜索框横向对齐 */
.header-container {
  display: flex;
  align-items: center; /* 让两者垂直居中 */
  gap: 1.5rem; /* 给Logo和搜索框之间留点间距 */
}

#Logo {
  flex-shrink: 0; /* 防止Logo被压缩变形 */
  /* 这里可以添加Logo的宽高样式，比如 width: 120px; height: auto; */
}

#Search {
  flex: 1; /* 让搜索框占据剩余空间，比固定宽度更自适应 */
  height: 3em;
}

步骤2：修改媒体查询，实现下移效果 #

调整你的媒体查询代码，在小屏幕下改变父容器的排列方向，搜索框自然就会跑到Logo下方了：

@media screen and (max-width: 959px) {
  #wrapper { width: 100%; }
  
  /* 切换父容器为纵向排列 */
  .header-container {
    flex-direction: column;
    align-items: stretch; /* 让搜索框占满容器宽度 */
  }
  
  #Search {
    width: 100%; /* 搜索框自适应容器宽度 */
    height: 3em;
  }
}

@media screen and (max-width: 640px) {
  #Search {
    /* 可以在这里添加小屏幕下的细节调整，比如内边距 */
    padding: 0 0.5rem;
  }
}

步骤3：检查HTML结构 #

确保你的Logo和搜索框在同一个父容器内，结构大概是这样：

<div class="header-container">
  <div id="Logo"><!-- Logo内容 --></div>
  <div id="Search">
    <!-- 搜索框的input等元素 -->
    <input type="text" placeholder="搜索..." />
  </div>
</div>

这样一来，当屏幕宽度小于959px时，搜索框就会自动下移到Logo下方，并且占满容器宽度，完美适配小屏幕~

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