哪些CSS属性控制网页对窗口大小调整的反应

我只是想知道，因为我知道，如果你试图把我的页面弄得太小，我的页面会变得一团糟。Facebook、StackOverflow和几乎任何其他编程良好的网站都会冷静地调整页面格式，直到耗尽"呼吸空间"，此时页面就会被浏览器的边界"吃掉"。这些编程良好的网站是如何很好地格式化自己以应对窗口大小调整的呢?是否有专门的CSS属性来帮助解决这个问题?

您可以使用主"包装器"div来居中。

<div id="wrapper">
    //all you content here
</div>

然后在你的css中设置"wrapper"如下

#wrapper{
    width:900px //or whatever
    margin: 0 auto; }

这给了它一个宽度和灵活的边距。当窗口的大小调整得太小时，它就像你说的那样"吃掉"它。

这里的关键是灵活的布局，要么使边距灵活(如我上面概述的)，要么使内容灵活。

另一种方法是使几乎所有东西都灵活，就像这样…

#wrapper{
    border:1px solid red;
    width:50%;
    min-width:300px;
    margin:0 25%;
    height:50px; //for display only
}

http://jsfiddle.net/jasongennaro/6FCjZ/1/

你应该看看"Fluid" CSS设计。这些CSS规则是用来管理页面宽度的。

一种常见的方法是使用max-width和min-width来管理网站的整体宽度。

例如:

点击这里查看实例

<html>
<head>
    <title>Width Test</title>
    <style>
        #main-content {
            background-color: #EEF;
            border: 1px solid #003;
            max-width: 45em;
            min-width: 20em;
            padding: 1em;
            margin: 0 auto; /* center */
        }
        .box {
            border: 1px solid #000;
            background: #363;
            color: #fff;
            padding: .25em;
        }
        .left {
            float: left;
            margin: .5em 1em .5em 0;
        }
        .right {
            float: right;
            margin: .5em 0 .5em 1em;
        }
    </style>
    </head>
    <body>
        <div id="main-content">
            <p>Resize Me...</p>
            <span class="box left">left</span>
            <span class="box right">right</span>
            <p>Fluid Layout</p>
        </div>
    </body>
</html>

这里的关键元素是#main-content上的样式。剩下的部分你就可以看到实际效果了

这两个网站都是固定宽度，但标题背景扩展。没有什么特别的。

标题(蓝色/灰色条)的宽度为100%，中间有一个固定宽度的容器

为div定义一个像素的width通常会给它一个固定的布局，而使用百分比会给它一个流动的布局。

为踢，检查960。，它使用固定的布局，非常适合避免跨浏览器问题:

http://960.gs/

还有960.gs的流体版本:

http://www.designinfluences.com/fluid960gs/

相关内容

最新更新

热门标签：