CSS3 中的自适应布局答案

【问题标题】：Adaptive Layouts in CSS3CSS3 中的自适应布局
【发布时间】：2012-09-19 10:45:26
【问题描述】：

我正在尝试将我的网站索引页面转换为可调整的。我希望页面的整个内容都可以调整。可调整是指如果有人在新窗口中打开页面并尝试通过鼠标拖动来调整窗口大小，我的页面内容也会根据窗口的宽度和高度自行调整。

是否可以只使用 CSS 或者我也必须使用一些 javascript？

我需要的是类似 [this][1]

任何帮助或建议都将得到高度评价

谢谢

【问题讨论】：

标签： html css adjustable

【解决方案1】：

你要做的是响应式设计

例如，您可以将您的 css 定位为特定设计：

//General css 


/*MEDIA BETWEEN 300 - 1000PX */ 
@media all and (min-width:300px) and (max-width:1000px)
{


}

/*MEDIA BETWEEN 621 - 800PX */ 
@media all and (min-width:621px) and (max-width:800px)
{

}

/*MEDIA BETWEEN 300 - 620PX */ 
@media all and (min-width:300px) and (max-width:620px)
{

}

一些可以提供帮助的页面是：

注意：使用 em 和 % 代替 px 和 pt

【讨论】：

【解决方案2】：

只需为内容设置相对宽度，例如 width: 75%; 或 width: 60%; 而不是 width: 450px; 或 width: 650px;。如果您只需要在调整页面大小时使元素变窄/变宽，这对您有用。
如果您想要进行重大布局更改（例如在您提供的演示中，当窗口变小时，顶部菜单栏变成侧边栏），您将需要一些 Javascript 来根据窗口宽度切换样式表。希望这能给你一些想法！

【讨论】：

好的，所以如果你只是想让元素在调整页面大小时变小或变大，只需设置百分比宽度。
我试过了，我给了我的主 div 宽度：59%，其他所有东西都在里面，但它没有用:(
让我提供一些 CSS 和我的页面
当我调整窗口大小时，主 div 的内容不会根据窗口大小自行调整大小，我希望它自行调整大小
确保#mainContainer的父元素如body和html标签没有设置固定宽度。

【解决方案3】：

您所说的称为“响应式设计”。响应式网站更多地使用百分比而不是像素以及 css 中称为“媒体查询”的东西。

这里有一篇很棒的文章： http://www.alistapart.com/articles/responsive-web-design/

【讨论】：