Flexbox - разделение экрана на маленькие экраны - PullRequest
Новая
       20

Flexbox - разделение экрана на маленькие экраны

0 голосов
/ 30 января 2019

Я нашел пример на Codepen, который разделяет экран на две половины.

Как заставить пример разделить экран по вертикали, когда высота меньше ширины?Я хочу использовать область экрана на небольших устройствах лучше, потому что, на мой взгляд, узкий длинный прямоугольник выглядит хуже, чем почти квадратный прямоугольник. 

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

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

horizontal

1 Ответ

0 голосов
/ 30 января 2019

Вы можете сделать это с соотношением сторон -> 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>
...