缩小屏幕尺寸时使搜索栏响应吗？答案

【问题标题】：Make search bar responsive when screen size is narrowed?缩小屏幕尺寸时使搜索栏响应吗？
【发布时间】：2019-09-12 14:12:58
【问题描述】：

我正在研究网站的搜索栏，在笔记本电脑屏幕/计算机屏幕上，搜索栏的宽度似乎很好。接下来我还想让搜索栏移动，平板电脑也响应，我试图在下面使用@media标签做一些事情，但似乎没有工作。当我在下面申请并在手机上打开我的网站网址时，整个页面会缩小并添加空格，请咨询，如何应用媒体属性？

下面是我的代码。

.form-search{
  width: 50%;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:480px) {
  .form-search {
    width: 60%;
    margin-left:auto;
    margin-right:auto;
  }
}

【问题讨论】：

标签： html css mobile responsive

【解决方案1】：

确保将.form-search 添加到如下所示的输入框中..

<input type="text" class="form-search" />

【讨论】：

【解决方案2】：

尝试为表单元素设置高度。尝试将您的代码修改为以下内容：

.form-search {
    height: 150px;
}

@media (max-width:480px) {
    .form-search {
       height: 70px;
}

【讨论】：

【解决方案3】：

使用 calc css，并从中减去其他元素的宽度和边距。

//if for example search button takes fixed 80px on screen:
.form-search {
width: calc(100% - 80px);
}

【讨论】：