0

我想不出一个好办法来形容标题。让我从我尝试了一周的布局图像开始。这是一个视频会议应用程序。我可以使用一些帮助来弄清楚这如何结合在一起。

布局

所以第一件事是带有箭头的两个侧边栏。那些需要扩展和崩溃。我基本上从 W3中撤出，以使它们独立工作。

然后我创建了一个带有两个 flex 行的网格。像这样的东西：

.Container {
  display: grid;
  grid-template-rows: 1fr auto;
}

// Chat, Video, etc.
.MeetingContainer {
  display flex;
}

.SideMenu {
  flex-shrink: 1;
}

.MainVideo {
  flex-grow: 1;
}

.SettingsMenu {
  display: flex;
  justify-content: space-between;
}

我之前也尝试过将所有内容放入网格/子网格设置中。大多只是使用这个生成器。我对设置菜单没有任何问题，很容易在媒体查询中将其分解。

这是我遇到的问题。将视频（它是 HTML5 视频标签）保持在响应式中间。并在不破坏整个布局的情况下保持溢出项目的高度。基本上，我试图让整个容器在任何屏幕尺寸下都可见。

对于视频，我认为一个简单的height: 100%, width: 100%, object-fit: cover就可以了。但是身高不会缩水。在我目前的操场/模型中是这样的：

在此处输入图像描述

这段文字的正上方是视频所在的位置。注意背景颜色是如何在“按钮”后面缩小的，它们会被困在视频下面。

至于溢出项目，我不知道如何为它们设置高度而不是静态像素。例如，这个想法是让“聊天消息”和“文件共享”占网格行的 50%。和溢出：自动；相对于那个高度。即使使用媒体查询也不能很好地工作。

这可以做到吗？我宁愿继续我现在的道路，但如果它行不通，它就行不通。或者我应该修改它以使其更现实？弹出窗口？:( 也许创建 iframe？我不确定这是否会有所帮助。我的想法已经不多了。

我在这里使用带有 CSS 模块的 react，所以我可以编程。但是缺少一堆事件侦听器来设置每个元素的高度，我不确定如何干净地使用它。

4

0 回答 0