Flexbox-在小屏幕上拆分屏幕 [英] Flexbox - screen splitting on small screens
本文介绍了Flexbox-在小屏幕上拆分屏幕的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Codepen上找到了示例,该屏幕将屏幕分成了两半.
I have found an example on Codepen which splits the screen in two halves.
当高度小于宽度时,如何使示例垂直分割屏幕?我想在小型设备上更好地利用屏幕区域,因为在我看来,一个狭窄的长矩形看起来要比一个近似正方形的矩形差.
How to make the example divide the screen vertically when the height is smaller than the width? I want to utilize the screen area on small devices better, because in my opinion a narrow long rectangle looks worse than a nearly square rectangle.
.leftside, .rightside {
height:50vh;
width:100%;
color:#fff;
font-size:40px;
}
@media screen and (min-width:768px)
{
.leftside, .rightside {
height:100vh;
}
}
推荐答案
You can do this with aspect-ratio -> 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>
这篇关于Flexbox-在小屏幕上拆分屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文