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

Question

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

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

使用当前设置，我必须手动缩小屏幕分辨率是否低，以使布局适合屏幕内。

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

可以在http://www.kapacitive.com/Main_Page_Template.html查看该页面，必须查看页面来源才能查看代码。

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

Answer 1

要实现某种动态布局，您可以使用CSS3媒体查询：

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

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

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

Answer 2

移除主体上的宽度并将这些样式设置为主Nav Cubes：

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

这会将它们的位置设置在屏幕的中间位置，使用负边距可以将它们推到左侧。

Answer 3

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

（它还有一大堆其他有用的Web开发工具。）