html - 当屏幕尺寸变窄时让搜索栏响应？

Question

我正在为一个网站设计搜索栏，在笔记本电脑屏幕/电脑屏幕上，搜索栏宽度似乎还不错。接下来我还想使搜索栏移动，平板电脑也响应，我尝试使用@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;
  }
}

Answer 1

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

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