当高度足够时，如何将带有文本的黄色部分移至白色？

Question

我想针对移动设备优化我的屏幕，因此当方向为纵向时，我会将带有文本的黄色部分向下移动到白色备用区域。我需要吗media query？我无法计算白色区域的可用高度。https://i.stack.imgur.com/Knket.gif <div  style={{    display: "flex"  }}>  <div    style={{      width: `100%`    }}  >    <div      style={{        paddingTop: `58.14%`,        background: "pink",        position: "relative"      }}    >    </div>  </div>  <div style={{ background: "yellow" }}>    <span style={{ marginRight: "10px" }}>Text</span>  </div></div>我尝试的一种方法是添加 flexDirection: "column"到第一个div，这会产生效果，我只是不知道如何制定条件media query并检查白色可用空间。

Answer 1

orientation您可以在媒体查询中使用：

@media screen and (orientation:portrait) { 
  [... your CSS rules for portrait mode here ...]
  }

Answer 2

弯曲方向列+环绕可以帮助检测下面的可用空间。

 .main {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  height: 100vh;

}

.pink {

  background-color: pink;

  padding-bottom: 55%;

}

.yellow {

  background-color: yellow;

}

<div class="main">

  <div class="pink"></div>

  <div class="yellow">Text</div>

</div>

Answer 3

.flexcontainer {

    display: flex;

    flex-direction: row;

}

.pink {

    width: 80%;

    background: pink;

}

.yellow {

    width: 20%;

    background: yellow;

}

@media (max-width: 1000px) {

    .flexcontainer {

        flex-direction: column;

    }

    .pink {

        width: 100%;

    }

    .yellow {

        width: 100%;

    }

}

<div class="flexcontainer">

  <div class="pink">Test</div>

  <div class="yellow">Text</div>

</div>

@media query是的，当您必须使用不同的屏幕尺寸和方向并且您不希望将此逻辑内联到元素上时，您当然需要。您需要确定元素应占据整个宽度的宽度。