0

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

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

这是我的背景 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;
}
4

5 回答 5

0

这是一个很好的做法，%而不是px在开发响应式设计时使用。由于您已硬编码宽度，您将始终获得屏幕尺寸小于 1100 像素的滚动条。我建议你使用
#container { width: 99%; margin: 0 auto; background: #ffffff; }

于 2013-01-04T08:51:40.530 回答
0

问题在于容器大小。

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

于 2013-01-04T07:51:38.893 回答
0

首先。你为什么要在你的身体里加载大量的 css/js？！

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

于 2013-01-04T07:52:22.257 回答
0

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

在你的CSS尝试添加：

body{overflow-x:hidden;}

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

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

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

希望这可以帮助

于 2013-04-26T03:26:26.883 回答
0

您的#topnav 导航面板似乎太宽，并且它的左偏移量也为 320 像素。尝试使其宽度等于 780px

于 2013-01-04T07:52:38.887 回答