Question

CSS如何让网站适应手机屏幕？

我已经添加了meta标签，问题详情见图，搜索框和上面黑色区域的文字都发生了错位，这个怎么办

Answer 1

并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。

你图片上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况

这种情况你可以使用media标签来做自适应

@media only screen and (max-width: 400px){
    .search{width:300px}
}

上面代码的意思是当页面宽度小于400px的时候  就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果

Answer 2

响应式布局先去看看吧。然后再去看看淘宝他们大型网站的适配方案。

Answer 3

需要加一句

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

然而这只是适应手机的前提条件，它告诉手机适配，这是一个响应式网站，然后需要写css去重置样式，这个需要专业的前端知识。

或者参考步骤一步步尝试

网页链接

Answer 4

不懂就问，我也不

Answer 5

不懂就问，我也不