Question

我正在尝试创建适应不同屏幕尺寸的流畅布局...... 它在桌面上工作没有任何问题，但在平板电脑或手机上，机身溢出并创建一个水平滚动条。 Click here you can see the problem

我已经检查了所有元素及其填充和边距，这不是问题所在。

Answer 1

桌面滚动删除

用于此css

footer.css 第55行

.infolinksbottom{
margin-left:5%;  // remove this line
margin-left:0;  //add this line 
padding-left:5%;  // add this line
box-sizing: border-box;  // add this line
}

Answer 2

问题在于css属性为类**.bottomlong**设置的方式。您需要更准确地管理min-width。目前min-width设置为120px，这是其提供水平滚动条的主要原因之一。您可以获得小于120px最小宽度或将float:left;放入.bottomlong。

我发现你没有使用BREAKPOINTS。最佳做法是使用断点在不同设备上实现结果。

以下是一些最常用的断点

@media screen and (max-width:959px){
    /*your css classes*/
}
@media screen and (max-width:640px){
    /*your css classes*/
}
@media screen and (max-width:320px){
    /*your css classes*/
}

您可以参考GOOGLE DOCS FOR BREAKPOINTS获取更多详细信息。

机身溢出屏幕宽度仅限手机

2 个答案: