时间戳

首页 > 解决方案 > Flexbox - 小屏幕上的屏幕分割

css - Flexbox - 小屏幕上的屏幕分割

问题描述

我在 Codepen 上找到了一个将屏幕分成两半的示例。

当高度小于宽度时，如何使示例垂直分割屏幕？我想更好地利用小型设备上的屏幕区域，因为在我看来，窄长的矩形看起来比接近方形的矩形更糟糕。

.leftside, .rightside {
height:50vh;
width:100%;
color:#fff;
font-size:40px;
}

@media screen and (min-width:768px)
{
.leftside, .rightside {
    height:100vh;
}
}

水平的

标签： csstwitter-bootstrapflexbox

解决方案

您可以使用宽高比来做到这一点 - > https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  border: 5px solid green;
  flex-flow: row nowrap;
  height: 100%;
}

.container>div {
  flex: 1;
  height: 100vh;
  color: white;
  font-size: 40px;
}

.container>.leftside {
  background: red;
}

.container>.rightside {
  background: blue;
}

@media (min-aspect-ratio: 9/8) {
  .container {
    display: flex;
    border: 5px solid yellow;
    flex-flow: column nowrap;
  }
  .container>div {
    height: 50vh;
  }
}
<div class="container">
  <div class="leftside">left</div>
  <div class="rightside">right</div>
</div>

推荐阅读