使垂直拆分页面具有响应性答案

【问题标题】：Making a vertical-split page responsive使垂直拆分页面具有响应性
【发布时间】：2016-09-14 21:25:56
【问题描述】：

我有一个想要做出响应式的页面布局。该页面目前在中间垂直分割为 50/50。我通过将 Section div 显示为表格并将内部的 div 显示为单元格来实现这一点。我还在页面的顶部中心有一个绝对定位的标题。

我想这样当页面在较小的屏幕（例如平板电脑或移动设备）上查看时，50/50 分割变为水平，所有包含的文本水平和垂直居中，标题保留在页面的顶部中心。

这是我的代码：

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>

任何帮助将不胜感激。

【问题讨论】：

有什么问题？
你的问题不是很清楚。但猜猜你要找的是media查询...

标签： html css split responsive css-tables

【解决方案1】：

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

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

【讨论】：