使 vertical-split 页面响应

Question

我有一个页面布局想要响应。该页面目前在垂直方向中间以 50/50 的比例分割。我通过将 div 部分显示为 table 并将 div 显示为单元格来实现此目的。我在页面的 top-center 处也有一个绝对定位的标题。

我想做的是，当在较小的屏幕（例如 tablet 或移动设备）上查看页面时，50/50 分割变为水平，所有包含的文本水平居中，垂直，标题保留在页面的 top-center。

这是我的代码：

html,
body,
section,
div {
  height: 100%;
}
body {
  color: #000000;
  font-family: Cinzel, serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
div {
  width: 50%;
  padding: 1rem;
}
h1 {
  font-size: 1.75rem;
}
.logo {
  text-align: center;
  color: red;
  position: absolute;
  width: 100%;
}
.container {
  display: table;
  height: 100%;
  width: 100%;
}
.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.left-half {
  background: #FFFFFF;
  color: #000000;
}
.right-half {
  background: #000000;
  color: #FFFFFF;
}

<body>
  <section class="container">
    <header class="logo">
      <h1>Title</h1>
    </header>

    <div class="left-half cell">
      <h1>First Half</h1>
    </div>
    <div class="right-half cell">
      <h1>Second Half</h1>
    </div>
  </section>
</body>

如有任何帮助，我们将不胜感激。

Answer 1

将媒体查询用于较小的屏幕，其中您将 display: table 和 display: table-cell 更改为 .container 和 .cell 中的 display: block。

并且绝对删除 div { width: 50%; } 规则 - 它会影响所有 div，您肯定不会想要它！（改为将 50% 的宽度写入 .cell 规则，并为其添加一个媒体查询规则以使其成为 100% 的较小尺寸。

使 vertical-split 页面响应

Making a vertical-split page responsive

html

css

split

responsive

css-tables