如何根据窗口大小动态调整网页布局？答案

【问题标题】：How to dynamically resize webpage layout according to window size?如何根据窗口大小动态调整网页布局？
【发布时间】：2011-12-27 08:30:12
【问题描述】：

我对 Web 开发比较陌生，我想知道是否有人知道一个简单的解决方案，可以让我正在开发的页面动态调整到窗口大小而不扭曲布局。我也想尝试使页面居中，问题是我尝试将其居中，但是当我调整窗口大小时，页面上的元素移动了位置。任何帮助表示赞赏。

我继续将代码放到服务器上，以便可以轻松查看我这样做主要是为了测试。该项目是自愿的，最终将用作语言教育工具的一部分。我只是想获取布局，以便在不扭曲布局的情况下动态调整大小。

在当前设置下，如果屏幕分辨率较低，我必须手动缩小以使布局正确地适应屏幕。

我目前在 CSS 中使用绝对定位来相对于背景图像定位页面元素，它们需要正确定位以适应背景图案。

该页面可以在http://www.kapacitive.com/Main_Page_Template.html查看，查看代码需查看页面源代码。

再次感谢任何帮助，如果您没有任何帮助的话，请不要回复。谢谢。

【问题讨论】：

【解决方案1】：

移除主体上的宽度并将这些样式设置为您的主导航立方体：

#mainNavCubes {
  position: absolute;
  left: 50%;
  top: 170px;
  margin-left: -240px;
}

这会将它们的位置设置在屏幕中间，并且您可以将它们推到左边。

【讨论】：

【解决方案2】：

要实现有点动态的布局，您可以使用 CSS3 媒体查询：

@media (max-width: 800px) {
  foo {
    ...
  }
}

@media (max-width: 500px) {
  foo {
    ...
  }
}

它们针对特定的屏幕尺寸。

【讨论】：

感谢您的建议。这看起来具有很大的潜力，并且当前的浏览器支持该功能。我只是想知道如何使用一台机器快速轻松地在各种屏幕尺寸之间进行测试。
调整浏览器窗口的大小 ;)
哈，虽然我不知道窗口的大小，但可能是一种使用 javascript 快速找到它的方法。此外，这种方法只考虑窗口大小，有没有办法同时考虑屏幕分辨率或向导使用的一些标准经验法则？

【解决方案3】：

我找到了适用于 Firefox 或 Chrome 的 Web Developer 扩展
检查以下链接：
https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
对于测量窗口和视口大小非常有用。它还允许您根据一些默认大小设置窗口大小。

（它还有很多其他有用的 Web 开发工具。）

【讨论】：