具体步骤如下：
1、输入position:fixedtop: 0left: 0使整个div固定在屏幕的最上方和最左方。
2、输入width:100%height:100%min-width: 1000px这个可以适合div的高度和宽度，而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。
3、输入background-size: cover-webkit-background-size: cover-o-background-size: cover使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。
4、输入background-position: center 0使图片的位置，居中，靠左对齐。
并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。
你图片上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况
这种情况你可以使用media标签来做自适应
@media only screen and (max-width: 400px){.search{width:300px}
}
上面代码的意思是当页面宽度小于400px的时候 就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果
