html - CSS Div 定位

Question

以下代码中的样式在大型设备(台式机和平板电脑)上运行良好。但是在移动设备上，由于 margin-top 值，大多数 div 都是重叠的。

我知道这不是响应式设计网站的正确方法。 你能给我一个解决方案吗？

#welcome {
  background: yellow;
  background-size: 100% 100%;
  width: 100%;
  height: 600px;
}
#inquiry {
  margin-top: 600px;
  width: 100%;
  height: 500px;
  background: red);
}
#products {
  margin-top: 1100px; /*(margin-top of inquiry + height of inquiry) */
  width: 100%;
  height: 500px;
  background: green;
}
#footer {
  margin-top: 1600px; /* (margin-top of products + height of products) */
  width: 100%;
  height: 500px;
  background: blue;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
  Welcome Message
</div>
<div id="Inquiry">
  Inquiry Form
</div>
<div id="products">
  Products
</div>
<div id="footer">
  footer
</div>

Answer 1

虽然使用 Mediaqueries 更好，但您也可以使用:

margin-top: 10vh;
height: 20vh;

这会将 div 向下放置屏幕高度的 10%，并为其赋予屏幕尺寸的 20% 的高度。问题是它是 CSS3，所以旧的浏览器不支持它。 (我认为android 4.0以下的都不会支持它。你必须测试这个)使用过时浏览器的人数越来越少。