网页缩放时响应异常：实现searchbox靠近#hamburger时缩小

当前搜索框（.searchbox）在页面缩放过程中会与右上角汉堡按钮（#hamburger）靠近甚至重叠，核心原因是搜索框容器的宽度计算未考虑汉堡按钮的占用空间，且布局缺乏针对性的响应式适配。以下是几种可行的解决方案：

方案1：媒体查询触发宽度调整 #

通过媒体检测视口宽度，当页面窄到搜索框即将接触汉堡按钮时，调整搜索框容器的最大宽度，预留出汉堡按钮的空间：

/* 在原有CSS基础上添加以下代码 */
@media (max-width: 768px) {
  .header-content {
    max-width: calc(100% - 60px); /* 60px = 汉堡按钮宽度 + 安全间距 */
    margin-left: 0;
    margin-right: auto;
  }
}

方案2：使用clamp()实现自适应宽度 #

利用CSS的clamp()函数，让搜索框容器的宽度在最小、理想、最大值之间自动适配，同时确保右侧预留足够空间：

/* 修改原有.header-content的样式 */
.header-content {
  max-width: clamp(300px, calc(100% - 60px), 620px);
  margin: 0 auto 0 0;
}

方案3：Flexbox重构头部布局 #

将头部容器改为Flex布局，让汉堡按钮与搜索框在水平方向合理分配空间，自动保持间距：

调整HTML结构（优化语义）：

<div class="site-wrapper">
  <div class="header-wrapper">
    <div class="header-left">
      <!-- 可放置logo等左侧元素 -->
    </div>
    <div class="header-right">
      <div class="header-wrapper-links">
        <ul>
          <li class="header-wrapper-li">
            <a class="header-wrapper-button"></a>
          </li>
          <li class="header-wrapper-li">
            <div id="hamburger-button">
              <a id="hamburger"></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <section class="header-content">
    <input class="searchbox" type="text" placeholder="Search without being tracked">
  </section>
</div>

修改CSS样式：

.header-wrapper {
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  max-width: 620px;
  width: 100%;
  margin: 1rem auto 0; /* 与顶部汉堡按钮保持垂直间距 */
}

@media (max-width: 600px) {
  .header-content {
    width: calc(100% - 40px);
  }
}

以上方案均可实现页面缩放时，搜索框自动缩小以避开汉堡按钮的效果，其中Flex布局方案更符合现代响应式设计的灵活性要求。

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