如何实现搜索栏默认对齐 768px响应式断点切换指定样式

直接按下面的代码补全即可，兼容桌面端对齐要求和768px断点下的移动端布局：

基础结构参考 #

如果你的现有HTML结构和下面不一致，优先对齐类名和层级，不需要额外嵌套多余标签：

<div class="search_bar_container">
  <select class="search_filter">
    <option>全部分类</option>
    <option>内容</option>
    <option>下载资源</option>
  </select>
  <input type="search" class="search_input" placeholder="输入搜索关键词">
  <button class="search_btn">搜索</button>
</div>

完整CSS代码 #

你之前写的768px断点下.search_bar_container的flex基础配置可以直接保留，补全剩余样式即可：

/* 桌面端默认样式 视口宽度≥769px生效 */
.search_bar_container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 8px;
}
.search_filter {
  flex-shrink: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
}
.search_input {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.search_input:focus {
  border-color: #3b82f6;
}
.search_btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 28px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: #fff;
  cursor: pointer;
}
.search_btn:hover {
  background: #2563eb;
}

/* 768px响应式断点 移动端样式 */
@media (max-width: 768px) {
  .search_bar_container {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 12px;
    padding: 12px 16px;
  }
  .search_input {
    /* 输入框置顶占满整行 */
    order: -1;
    width: 100%;
    flex: none;
    height: 44px;
  }
  .search_filter {
    /* 筛选下拉占一半宽度，放大触控区域 */
    width: calc(50% - 6px);
    height: 44px;
  }
  .search_btn {
    /* 搜索按钮占另一半宽度，靠右对齐 */
    width: calc(50% - 6px);
    height: 44px;
    margin-left: auto;
  }
}

调整说明 #

• 如果你需要调整移动端下元素的排列顺序，只需要修改对应元素的order属性值即可，数值越小排列越靠前，不需要改动HTML结构
• 移动端元素高度统一设为44px符合移动端触控交互规范，避免点击区域过小误触
• 筛选下拉和搜索按钮的宽度占比可根据设计稿自行调整，比如要做3:7分配，只需要把两个元素的宽度分别改成calc(30% - 6px)和calc(70% - 6px)即可
• 如果你的搜索栏有图标、快捷筛选标签这类额外元素，桌面端设置flex-shrink:0避免被压缩，移动端按排列需求设置order和宽度占比即可

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