html - 如何使用 HTML5 和 CSS3 使设计具有响应性？

Question

我是使用 CSS3 进行响应式设计的新手。我正在尝试创建一个设计，但它并不完全是流体设计。

HTML 标记

    <div id="wrapper">
    <div id="header">
        <div id="navigation">
            <ul>
                <li><a href="#">navigation1</a></li>
                <li><a href="#">navigation2</a></li>
                <li><a href="#">navigation3</a></li>
                <li><a href="#">navigation4</a></li>
            </ul>
        </div>
    </div>
</div>

CSS 样式

    body {
    margin: 0px;
    padding: 0px;
}

#wrapper {
    width: 96%; /* Holding outermost DIV: 960 */
    background-color: lightgrey;
    margin-right: 10px;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#header {
    width: 95.83333333333333%; /* 920 divided by 960 */
    background-color: lightgreen;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#navigation {
    width: 91.66666666666667%; /* 880 divided by 960 */
    margin-left: 10px;
    margin-right: 10px;
    background-color: lightyellow;
    padding: 10px;
}

我正在使用这个公式，即目标 ÷ 上下文 = 结果

这不是一个完全流畅的设计。当我重新调整我的浏览器时，一段时间后我可以看到一个水平滚动条。所以，在某种程度上我可以说这是一个流体设计，但不完全是。

包装宽度:960px，例如 96%

标题宽度:960 - (10 + 10 + 10 + 10) = 920 即 920/960 = 95.83333333333333%

导航宽度:920 - (10 + 10 + 10 + 10) = 880 即 880/960 = 91.66666666666667%

我在计算以像素/百分比为单位的宽度时是否做错了什么？

我无法理解如何确定需要转换为 % 值的 px 宽度。如果我为 Wrapper 提供了一些边距/填充样式，则它要么是 920，要么是 Header 的其他内容。

例如，如果主 Wrapper 的总宽度为 960px，它有 10px 的填充和边距，那么 Header 应该是 960 - ((10 * 2) + (10 * 2)) = 920。如果我我在这里错了。

寻求帮助。

Answer 1

960 - ((10 * 2) + (10 * 2)) = 920 不。

原因:

您添加宽度为 960 的主包装器，并向所有边添加 10 的填充。所以主包装器的总大小为 960 + 10* 2(左和右)= 980px。 (它占用浏览器窗口的 980px，并且在该 div 中有 960 个容器)

但是

CSS3 中有一个名为box-sizing 的属性，您可以将border-box 的值设为您的问题结果。

使用 #wrapper { box-sizing: border-box }

960 - ((10 * 2) + (10 * 2)) = 920 正确