Question

我正在构建一个无响应的网站，页眉的页脚跨越浏览器窗口的整个宽度。在DIV的宽度为100％的内部，我嵌套了宽度为1000px的div，它保存了页眉，导航和页脚内容。

我的问题是，在移动设备上查看网站时，导航和页脚的缩放比例会缩小到比网站的标题和主要区域略小的尺寸。

奇怪的是导航和页脚受到影响，而标题没有问题（使用相同的方法构建）。

如何按比例缩放所有内容？整个网站和所有主要div的宽度是1000px，那么为什么它们会在移动设备上以不同的尺寸出现呢？

以下是网站的网址：http://www.test-site.co.nf

以下是代码示例：

HTML：

</head>

<body>
<div id="container">
<div id="header">
<div id="header-content">
<div id="logo">
<a href="index.html"><img src="img/ama-party-rentals-logo.png" height="98" width="500"/></a>
</div>
<div id="social-icons">
<a href="" target="_blank"><img class="social" src="img/icons/facebook.png" height="40" width="40"/></a>
<a href="" target="_blank"><img class="social" src="img/icons/googleplus.png" height="40" width="40"/></a>
</div>
</div>
</div>
<div id="nav-bar">
<div id="nav">
<ul id="ul-nav">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Company</a></li>
<li><a href="">Past &nbsp; Events</a></li>
<li><a href="">Contact &nbsp; Us</a></li>
<li><a href="">Francais</a></li>
</ul>
</div>
</div>

CSS：

#header {
   background-color:#84B13F;
    width:100%;
    height:150px;
    border-bottom-style:solid;
     border-bottom-color:#648830;
  border-bottom-width:5px;




}

#header-content
{
  width:1000px;
  height:150px;
  text-align:center;
  margin:auto;
  background-image:url('img/top-banner.png');


}

#nav-bar
{
  width:100%;
  height:50px;
  background-color:#84B13F;
  border-bottom-style:solid;
  border-bottom-color:#648830;
  border-bottom-width:5px;

}

#nav
{
      clear:both;
      margin:auto;
      height:50px;
      width:1000px;
      text-align:center;

}

Answer 1

我可以在您的网站上看到两个问题。

1）在css cass box-div中有宽度1000和margin-left：20px。所以实际的1000px + 20px总计1020px就超出了您的布局。

2）你的导航尺寸是1020px，但是你的标题是1000px所以当你在移动设备或小设备（最大屏幕999px）时只显示1000px，这比整个网站要小一点。

将标题的宽度更改为1020px，以解决问题。

更具体一点

   #header-content{
       padding: 0px 10px;
       /**your present css**/
    }

只需更新您的＃header-content添加填充，您的网站即可修复。

Answer 2

好的，我明白了：

我的问题是我有一个包装整个网站的容器DIV。在那个容器中，我将高度设置为100％，但没有定义宽度。我将最小宽度设置为1020px并且瞧瞧;没有更多的破碎，截止的divs。我的页眉和页脚div设置为100％宽度缩小，但整个站点的缩放停止在1020px宽度，因此我的所有内容都显示了我在移动设备和桌面上的预期方式。感谢所有回复的人！

在移动浏览器中，Div宽度不会均匀调整大小

2 个答案: