在小屏幕上更改标题视图答案

【问题标题】：change header view on small screen在小屏幕上更改标题视图
【发布时间】：2021-04-06 12:54:39
【问题描述】：

我有一个看起来像这样的标题：

我找到了一个我想要的例子。在小屏幕上，我需要搜索栏进入下方。：

问题是我不知道这是怎么做到的。当我达到一定的屏幕宽度时，我尝试将位置更改为相对位置，但这没有帮助。

  <div className="header">
    <div className="header__logo">
      <img src={logo} alt=""></img>
    </div>
    <div className="header__search">
      <SearchBar />
    </div>
    <div className="header__right">
      <FiUser className="header__icon" />
      <Cart />
    </div>
  </div>



/*
   header
*/
.header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  justify-content: center;
}

.header__logo {
  width: 120px;
  height: 60px;
  line-height: 65px;
}

.header__logo img {
  width: 120px;
  background-size: contain;
}

.header__search {
  width: 50%;
  height: 60px;
  line-height: 60px;
  margin: 0 20px 0 20px;
  text-align: center;
}

.header__right {
  width: 120px;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.header__icon {
  height: 30px;
  width: 30px;
  margin-top: 15px;
  cursor: pointer;
}

我不需要你为我编写代码，我自己就可以，我只是不知道该怎么做。

【问题讨论】：

标签： html css jsx

【解决方案1】：

如果你对一点css重构感兴趣，你可以使用CSS网格来改变这个搜索栏的位置

要了解更多信息，我会推荐这个link

干杯！

-- 更新 ---

如果没有，您可以在屏幕一侧到达某个点时隐藏此栏，然后在下方显示一个新的“div”或“副本”（我认为这很酷更容易创建动画）

甚至使用 javascript 将此元素附加到所需位置

【讨论】：

【解决方案2】：

一种选择是在同一个文件中创建两个search bars。并根据屏幕尺寸隐藏一个并显示另一个。

类似这样的：

<select class="for-desktop"> ... </select>
<select class="for-mobile"> ... </select>

那么 CSS 将如下所示：

 @media(max-width:768px){
     .for-desktop{
        display:none;
      }
 }

 @media(min-width:768px){
     .for-mobile{
        display:none;
      }
 }

这样你就不需要想太多其他的东西了。这样做很简单。

其他方法是对整个标题使用 CSS-Grid。并在底部显示select（需要高效编写一些代码）
你也可以做一个快速破解。在parent 和position:absolute; 上设置position:relative，仅当屏幕尺寸较小时选择，并相应地调整您的select。

类似于下面的例子。

.header {
  position:relative;
}

.header__search {
  position:absolute;
  bottom: -60px;
  left:0;
  right:0;
}

（您可能需要对search item 的定位进行一些小调整）

【讨论】：