所以我找到了一篇关于响应式设计的文章(here)我试着做一些像它在教程的一部分中那样的东西。该网站说将元素的大小除以元素所在容器的大小。(我除以 1000 而不是 1050 的原因是因为 div#main 上的边距使它成为 1000px，即使标题是 1050 像素)如果这没有意义，那么链接可以解释它。它在我的浏览器中以全尺寸看起来不错，但如果我将窗口缩小很多，那么它就不会按应有的方式调整大小。我不确定我的代码的哪一部分是错误的，但如果有人可以帮助我，那就太好了! Here's我创建的页面的链接。这是我的源代码:
<!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>
最佳答案
也许如果我解释发生了什么，您会发现实际上没有问题。
内盒有一个固定的高度，基于父容器高度的 75%。因此，所有元素的高度保持不变。但是，您的边距是父元素宽度的分数，因此它们会随着页面宽度而变化。随着页面变小，边距变小。由于 div 自然地位于页面上尽可能高的位置，因此它会移向其父元素的边框。
所有这些都是您的设计所期望的。要修复它，请设置固定的顶部和底部边距:
.box {margin: 12px 1.25%;}
关于CSS 边距表现奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14949729/