Question

我只是想知道，因为我知道如果你试图让它太小，我的页面会变得混乱。 Facebook，StackOverflow和几乎任何其他编程良好的网站都会平静地调整页面格式，直到它们用尽“呼吸空间”，此时页面才会被浏览器的边界“吃掉”。这些编程良好的网站如何很好地格式化以应对窗口大小调整？是否有专门用于帮助解决此问题的CSS属性？

Answer 1

您可以使用主“包装器”div来集中您的网站。

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

然后在你css中设置“包装器”如下

#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/

Answer 2

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

标题（蓝色/灰色条）的宽度为100％，内部有一个固定宽度的容器，位于中心位置。

Answer 3

你应该研究“流体”CSS设计。这些是用于管理页面宽度的CSS规则。

执行此操作的常用方法是使用max-width和min-width来管理网站的所有宽度。

例如：

Click here to see a live example.

<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上的样式。剩下的就是你可以看到它的实际效果。

Answer 4

将width像素定义为div通常会为其提供固定的布局，而使用百分比会给出流畅的布局。

对于踢球，请查看960.gs，它使用固定布局，非常适合避免跨浏览器问题：

http://960.gs/

还有960.gs的流畅版本：

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

什么CSS属性控制网页如何响应窗口大小调整？

4 个答案: