html - 当有足够的高度时，如何将带有文本的黄色部分向下移动到白色？

Question

我想将我的屏幕优化为移动设备，所以当方向是纵向的时，我会将带有文本的黄色部分向下移动到白色备用区域。我需要media query吗？我无法计算出白色区域的可用高度。

<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条件并检查白色可用空间。

标签： htmlcssreactjsmedia-queries

Answer 1

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

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