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

Question

我知道 max-width 已得到很好的记录，但我仍然无法让我的网站在某个点停止拉伸。当用户将浏览器拉伸超过 800 像素时，我希望我的网站停止拉伸。（我所有的 div 和一切都在 % 中完成，而不是 px。）我创建了一个包装器，

#wrapper{
    max-width:800px;
}

但是，因为我的 div 是绝对定位的，所以它不会移动它们，当我将它们的位置设为相对时，网站看起来很混乱。我希望得到一些帮助，如果您需要，可以提供更多代码。我认为主要问题在于绝对定位。

score 2 · Accepted Answer

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

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

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

jsFiddle

有关更多信息，请参阅CSS-Tricks 中的相对定位内的绝对定位。

score 1 · Accepted Answer

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

标准样式表：

<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' />

当用户来自平板电脑或智能手机时，大多数响应式网站都使用这种技术来加载特定样式。试试看。