Question

在较小的分辨率屏幕上，我的网站尽管适合总是有一个无用的水平滚动条。我想知道是否有人可以给我任何提示，让我的网站更好地适应屏幕？

如果您使用的是笔记本电脑，很容易发现水平滚动条向右移动得太远，只有空白灰色。我的内容正确居中，但背景长度太长。

这是我的背景CSS和容纳我内容的容器。

body {
width: auto;
margin: 0px 0px 0px 0px;
text-align:center;
background: #E8E8E8;
}

.page {
  box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.1);
  margin: 0 auto;
  height: 100%;
}

#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}

Answer 1

问题在于容器大小。

对于大多数小型显示器来说，1100像素有点太多了。即使分辨率为1080 x 720的屏幕也必须使用滚动条来显示剩余的20个像素。

Answer 2

首先。你为什么要在体内装载大量的css / js？！

第二：您的容器div的宽度为1100像素，导致滚动条的分辨率低于该值。

Answer 3

您的#topnav导航面板看起来太宽，而且它的偏移量也是320像素。尝试使其宽度等于780px

Answer 4

在开发响应式设计时，最好使用%代替px。由于您已经对宽度进行了硬编码，因此屏幕尺寸总是小于1100px。我建议你用左 #container { width: 99%; margin: 0 auto; background: #ffffff; }

Answer 5

另一种选择是将您的身体或容器的溢出设置为隐藏。这将删除滚动条。

在你的CSS中

尝试添加：

body{overflow-x:hidden;}

另一种方法是使用媒体查询根据本机屏幕大小调整容器大小。例如，如果在最大屏幕宽度为300px的移动设备上显示该页面，则可以将以下内容添加到您的CSS中

@media screen and (max-width:300px){
    #container{width:300px;}
}

您可能也想阅读有关响应式设计的文章：http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

希望这会有所帮助

在较小的分辨率屏幕上我的网站尽管适合总是有一个无用的水平滚动条

5 个答案: