设置整个网站的最大宽度的问题？

Question

据我所知，max-width已经有很好的记录，但我仍然无法让我的网站在某个时刻停止拉伸。当用户将浏览器拉伸超过800像素时，我希望我的网站停止拉伸。 （我所有的div和所有内容都以％的形式完成，而不是px。）我创建了一个包装器，

#wrapper{
    max-width:800px;
}

然而，因为我的div是绝对定位的，所以它不会移动它们，当我相对于它们的位置时，网站看起来非常混乱。我会喜欢一些帮助，如果你需要它可以提供更多的代码。我认为主要问题在于绝对定位。

Answer 1

您需要将position: relative添加到父包装

#wrapper {
    max-width:800px;
    position: relative;
}

以下小提琴说明了相对和绝对定位之间的区别：

jsFiddle

有关详细信息，请参阅CSS-Tricks中的Absolute Positioning Inside Relative Positioning。

Answer 2

您可以使用媒体查询，它们允许您定位特定的分辨率范围，例如，如果您希望网站停止拉伸，甚至在屏幕介于800px和1200px之间时佩戴新样式，您可以使用：< / p>

标准strylesheet：

<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 

媒体查询样式表：

<link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1200px)' href='stylesheet.css' />

当用户来自平板电脑或智能手机时，大多数自适应网站都会使用此技术加载特定样式。 尝试一下。