css - 无法在 html 中创建响应部分

Question

我有一个网页，其中包含一些部分。

我将这个 css 类用于部分以使其具有响应性，但它​​没有那么多响应。有些显示器的部分有更多的空白，有些适合显示器。

    .section {
    height: 100%;
    padding-top: 20px;
}

我认为我应该更改 css 中的 section 类。但是不知道改什么。

这是部分的 html 代码:

    <div class="section" id="1">
<section>
<br/>
<br/>
<br/>
<br/>
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
<h1>Line 5</h1>
<h1>Line 6</h1>
</section>
</div>

编辑:部分的宽度很好，但高度不太好。有些设备显示部分的所有高度，有些设备显示部分高度，有些设备适合。

一些设备显示第 1 行和第 2 行，而第 3 行有些显示所有这些。不同。

在较小的设备中显示所有带有大量空格的行，这意味着它可以使用更多内容，但在较大的设备中只显示三行甚至更少。

我想让所有部分及其内容响应，并想在 section 类中使用 css。

如何让这些部分响应所有设备？

提前致谢

Answer 1

要在高度中使用 % 值，您需要确保元素的每个祖先也使用 % 值作为高度。对于 width % 值将工作得很好，您将能够轻松实现响应。

顺便说一句，你为什么不试试像 Bootstrap 或 Foundation 这样的响应式框架呢？