如何根据窗口大小动态调整网页布局？ [英] How to dynamically resize webpage layout according to window size?

问题描述

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

I am relatively new to web development, I am wondering if anyones knows off hand a simple solution to making the page I have under development dynamically resize to the window size without distorting the layout. I would also like to try to have the page centered as well, the problem is I tried centering it but as I resized the window the elements on the page moved out of place. Any help is appreciated.

我把代码放到服务器上，所以很容易看到我这样做主要是为了测试。该项目是自愿的，最终将用作语言教育工具的一部分。我只是想获得布局，以便它会动态调整大小，而不扭曲布局。

I went ahead and put the code up onto a server so it can easily be viewed I did this mainly for testing. The project is voluntary and will eventually be used as part of a language education tool. I am just trying to get the layout so that it will resize dynamically without distorting the layout.

使用当前的设置，如果屏幕分辨率低，我必须手动缩小

With the current setup I have to manually zoom out if the screen resolution is low to get the layout to fit properly within the screen.

我目前使用CSS中的绝对定位来定位页面元素相对于背景图片，他们需要被定位

I am currently using absolute positioning in CSS to position the page elements relative to the background image, they need to be positioned properly to fit into the background pattern.

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

The page can be viewed at http://www.kapacitive.com/Main_Page_Template.html will have to view the page source to view the code.

任何帮助是赞赏，如果你没有什么有用的帮助说，请只是没有响应。感谢。

Once again any help is appreciated and please if you do not have something helpful to say please just don't even respond. Thanks.

推荐答案

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

To achieve a somewhat dynamic layout, you can use CSS3 media queries:

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

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

他们定位特定的屏幕尺寸。

They target specific screen sizes.

这篇关于如何根据窗口大小动态调整网页布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！