Html css3缩小页面时的最小最大宽度

祝你愉快。我正在制作一个网页，但我在定义最大和最小宽度时遇到了困难。基本上，我希望我的页面在缩小网页时像大多数网页那样居中。请需要专家帮助。尽快谢谢

body
{
  height:100%;
  width:100%;

  margin:0 auto; 
  background-image: -webkit-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: -moz-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: linear-gradient(top, #E5E5E5 30%, #999);

}

#mainContainer
{
background-image:url(bg3.jpg);
background-repeat:repeat;
background-color:#999;
width:70%; /*default width in percent for a liquid layout.
the problem is when I zoom out the page the width remains to be in 70% therefore forcing the contents to be pushed to the left corner instead of being centered.*/
min-width:940px; 
margin:5px auto;
height:100%; 
padding:0 1% 0 1%; 
-webkit-border-radius: 10px;
border-radius: 10px;
}

---

它对我来说是中心的。但有许多潜在问题：

要将高度100%应用于#mainContainer，您不仅需要将高度应用于body，还需要将高度应用于html

此外，您还需要清除html和正文上的空白和边距，否则它们将添加滚动条

您不能将边距设置为100%高度的容器，否则它们将向页面添加滚动条。我用填充物和“框大小：border box；”来模拟它们，但它在旧版IE中无法正常工作，因此您需要对它们进行修改

此外，您最好将“高度”更改为“最小高度”，否则它将变得凌乱，然后您将在#mainContainer中拥有大量内容

---

在这里修复了它们：

基本上，这只能通过脚本实现

获取浏览器屏幕的70%宽度。 将该宽度转换为相应的px值 使用从转换/计算中获得的值设置#主容器的最大宽度

$( document ).ready( function(){
setMaxWidth();

function setMaxWidth() {
$( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

---

-感谢Esailija

感谢您的澄清，并花了一些时间来了解这一点。它改善了我的页面布局。哦，页面以你为中心？基本上，它确实是在中心时，缩小，但这有点不同与我的。缩小时，容器大小保持不变，但我希望缩小时宽度本身也能流畅地适应缩小，而不仅仅是内容。这就像沿宽度大小压缩内容。如果我理解正确，您希望#mainContainer在宽度超过940px时拉伸，对吗？如果容器宽度的70%大于最小宽度（940px），则它现在正在拉伸。因此，如果屏幕宽度超过1350px，主宽度将开始变宽。如果你想在它变成940px后立即开始拉伸，你需要将“宽度：70%”改为“宽度：100%”；“或者类似的东西。我希望#主容器在缩小后限制其宽度，从而压缩其所有内容，将其移动到中心。-这是它最初的样子的快照。->[link]-然后这就是我缩小浏览器时的样子。[link]-这就是我希望它缩小时的样子。[link]…看到区别了吗？=D基本上我知道宽度：70%导致了这个难题，但我不能删除它，因为我的页面在其他大小的屏幕上不会是液体。如果我在px中定义了宽度或最大宽度，我可以得到我想要的外观（但这不适用于液体布局）。啊，我现在明白了。但恐怕我不知道如何使它同时缩放和液体。：（嗨，我用了你的答案，当页面缩放为100%时，会发生缩放，它工作正常。但是如果屏幕缩放为50%，那么我会加载我的页面：我不会得到一个好结果。谢谢