在缩小屏幕尺寸时使搜索栏响应?

Question

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

下面是我的代码。

.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" />

Answer 2

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

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

Answer 3

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

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