如何设置内部 <div> 的样式和结构以在不使用 px 作为尺寸的情况下在移动设备上保持父级 <div> 的大小

Question

我正在制作一个视频 UI，其中包含 show/hide 使用 JQuery 的不同图层。目前，叠加层匹配默认视频播放器大小，无论桌面屏幕大小如何。遗憾的是，在移动设备 (iPhone) 上，叠加层只有足够的高度来适应内容，而不是完整的视频播放器高度。

我已经尝试了 div 的不同嵌套和许多组合以及类父子 div 的 CSS 包括：位置：relative/absolute 显示：table/table-cell/block等对父项 div 使用 px 大小有帮助，但在调整 screens/browser 大小时，它对视频播放器大小的控制较少。允许它自动调整屏幕大小对用户更友好。

.video-box {
  position: relative;
}

.overlay1,
.overlay2 {
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  display: table;
  position: absolute;
  top: 0px;
  right: 0px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="video-box">
  <video><source src="video.mp4"></video>

  <div class="overlay1">
    <div class="content">
      <h3>You are about to watch a video</h3>
    </div>
  </div>

  <div class="overlay2">
    <div class="content">
      <h3>Video is over</h3>
    </div>
  </div>
</div>

我的目标是让每一层都匹配准确的大小，并用垂直和水平居中的文本内容覆盖视频播放器。我使用的代码使它可以在桌面上运行（包括 chrome 检查移动设备大小调整），但不能在实际的移动设备上运行。叠加层仅在水平方向调整大小以适应文本内容，而不是整个视频播放器的高度。

Answer 1

您可以使用 css-flex 让内容位于中间，而不是使用第二个 div，即 .content。请尝试以下代码。

.video-box {
  position: relative;
}

video {
  max-width: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.2);
}

<div class="video-box">
  <video><source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>

  <div class="overlay">
    <h3>video is over</h3>
    <p>what to do next</p>
  </div>

  <div class="overlay">
    <h3>Video is over</h3>
  </div>
</div>

如何设置内部 <div> 的样式和结构以在不使用 px 作为尺寸的情况下在移动设备上保持父级 <div> 的大小

How to style and structure internal <div> to maintain parent <div> size on mobile without using px for dimensions

html

css

responsive-design