0

所以我找到了一篇关于响应式设计的文章（here），我试着做一些类似于教程部分内容的东西。该网站说将元素的大小除以元素所在的容器的大小。（我除以 1000 而不是 1050 的原因是因为 div#main 上的边距使其为 1000px，即使header 是 1050px）如果这没有意义，那么链接可以解释它。我的浏览器在全尺寸下看起来不错，但如果我将窗口缩小到很多，那么它就不会按应有的方式调整大小。我不确定我的代码的哪一部分是错误的，但如果有人可以帮助我，那就太好了！这是我制作的页面的链接。这是我的源代码：

<!DOCTYPE html>
<html>
<head>
<style>

body, html {
    margin: 0;
    height: 100%;
    width: 100%;
}    

header {
    height: 100px;
    max-width: 1050px;
    margin: 0 auto;
}

#main {
    border-radius: 25px;
    background-color: #aaa;
    height: inherit;
    max-width: inherit;
    margin: 25px;
}

.box {
    width: 47.5%;
    height: 75%;
    margin: 1.25%;
    background-color: #444;
    border-radius: 15px;
    float: left;
}

</style>
</head>
<body>

<header>
    <div id="main">
        <span class="box">
        </span>
        <span class="box">
        </span>
    </div>
</header>

</body>
</html>
4

1 回答 1

1

也许如果我解释发生了什么，你会发现实际上没有问题。

内盒具有基于父容器高度的 75% 的固定高度。因此，所有元素的高度保持不变。但是，您的边距是父元素宽度的一部分，因此它们会随着页面宽度而变化。随着页面变小，页边距变小。由于 div 自然地位于页面上尽可能高的位置，因此它会移向其父级的边框。

所有这些都是您的设计所期望的。要修复它，请设置固定的顶部和底部边距：

.box {margin: 12px 1.25%;}
于 2013-02-19T04:27:24.843 回答