我正在为一个网站设计搜索栏,在笔记本电脑屏幕/电脑屏幕上,搜索栏宽度似乎还不错。接下来我还想使搜索栏移动,平板电脑也响应,我尝试使用@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;
}
}
最佳答案
确保将 .form-search
添加到输入框,如下所示。
<input type="text" class="form-search" />
关于html - 当屏幕尺寸变窄时让搜索栏响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57908652/