有人帮忙看一下这个页面为什么在手机显示会出现多余的部分。

b17846e9gy1fpwbj2439cj20ms0srk6b.jpg

b17846e9gy1fpwbjnpdtfj20kp0fnaf8.jpg

虽然没写手机页面只写的pc页面,但是为什么会多出来这些空白部分啊,也什么都没有

https://mamba-working.github....
预览地址在这里

阅读 3.9k
8 个回答

clipboard.png
移动端元素其实都溢出来了,自适应需要优化下

不是“多出来”,而是“少了”,具体原因不明,可以使用chrome调试,用图里的红圈中的按钮选中某个元素,然后看它的style,分析原因。图片描述

在手机上看的,没法精确定位问题所在行。
这种情况一般是页面中某个或某些元素宽度超过 100% ,而页面主体的宽又定义为了 100% 或者没有定义默认为 body 宽,导致的。

解决办法即为找到那些宽度超出 100% 的元素,调整之。
简单粗暴的,也可以直接设置 body 的 overflow-X 为 hidden

没有解,这接着还能做适配吗?

切换浏览器刷新了吗?我看了没问题啊

.background{width: 100%;}

给body加个position:relative
这个好像简单点
clipboard.png

图片描述

图片描述

有上面两张图可以看到,由于超出的部分是 icon-right部分与最后一个li被挤下去了造成的。去掉icon-right问题解决了。但是这是治标不治本,除了以上两个,还有section中基本信息的内容都溢出了,移动端布局是需要重新优化下。还有一个,如果是想弄一屏显示的,body除了高度100%,宽度也要设置100%,这样才会超出布局,影响布局。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题