Question

以下代码中的样式在大型设备（台式机和平板电脑）上运行良好。但是在移动设备上，由于#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; }值，大多数div都会重叠。

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

＆＃13;

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

＆＃13;

PersonId    Name        Address     Role    Organization
1           John Smith  123 Main St Donor   Library
1           John Smith  123 Main St Member  Ballet
2           Jane Doe    333 Main St Member  Orchestra

＆＃13;

Answer 1

虽然最好使用Mediaqueries，但您也可以使用：

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

这会将屏幕高度的10％放下，并将其高度设置为屏幕尺寸的20％。问题是它是CSS3所以老浏览器不支持它。（我认为android 4.0以下的所有内容都不会支持它。你必须测试它）使用过时浏览器的人数越来越少。

Answer 2

您可以使用margin-top：％而不是像素。或者只使用@media查询来控制不同屏幕上的边距。例如：@media (max-width: 991px) { #products{ margin-top: 100px; } }

Answer 3

尝试：

position: absolute;
margin-top: 150px;
margin-left: 100px;

//在一个盒子里面你可以使用padding-top ......

Answer 4

您可以使用百分比表示宽度和高度属性（宽度为80％将始终为浏览器窗口当前大小的80％，因此当调整窗口大小时，您的元素将响应缩放）。

但是，我强烈建议您学习使用媒体查询。假设您有左侧导航类的左侧导航菜单，您希望占据页面宽度的20％，但要隐藏在800px及更小的页面宽度。

console.log(document.getElementById('test').textContent);

您应该很容易理解媒体查询如何在此示例中工作 - 您指定应用给定规则的最大和/或最小页面宽度或高度。应该非常直接地使用这些来使页面布局正常运行。

Answer 5

根据你的评论，普通的静态/相对div元素默认与屏幕一样宽，并且会相互垂直堆叠。

通过在它们上设置position: relative，您可以将它们从正常流程移开，如果您设置position: absolute，则可以从正常流程中取出它们，并使用左侧将它们放在精确的位置/大小上，顶部，宽度和高度属性。

以下示例显示：

＆＃13;

#welcome {
  background: yellow;
  height: 600px;
  position: relative;
  left: 50px;
}
#inquiry {
  height: 500px;
  background: #f99;
}
#products {
  height: 500px;
  background: #9f9;
}
#footer {
  height: 500px;
  background: #99f;
}
#extra {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background: #f9f;
}

＆＃13;

<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, positioned relative, moved out of flow 50px to the left
</div>
<div id="inquiry">
  Inquiry Form
</div>
<div id="products">
  Products
</div>
<div id="footer">
  footer
</div>
<div id="extra">
  extra, positioned absolute
</div>

＆＃13;

CSS Div Postioning

5 个答案: