Question

我正在尝试创建一个单页网站。我有一个不同的容器，每个部分的高度为100vh，所以容器调整大小不同的屏幕，但内容并没有使网站在小屏幕上全部出错。如何使用容器调整内容大小。

Answer 1

也许这可以帮助

<HTML>
  <HEAD>
    <style>
     .resizer{
        min-width:700px;
        margin-left:10px;
        overflow:hidden;
      }
    </style>
  </HEAD>
  <BODY>
    <div class='resizer'>
       YOUR CONTENT goes here
    </div>
 </BODY>
</HTML>

您可能还想查看CSS: Auto resize div to fit container width

Answer 2

您可以做的最简单的事情是使用HTML5响应式框架，例如Bootstrap，或使用CSS媒体查询，如here所示（或参见下面的快速示例）。除此之外，它可能涉及javascript与上述两种方式具有类似的最终结果。

@media screen and (min-width: 480px) {
body {
    background-color: lightgreen;
     }
}

调整不同屏幕尺寸的内容？

2 个答案: