(CSS) 移动设备的 Flexbox 和媒体查询

Question

我使用 flex 创建了一个小型网站，它有两列，一列是文本，二列是图片。我以为它会在移动设备上自动换行，但事实并非如此（Firefox 中的移动设备视图让我很困惑）。

我知道这是一个非常初学者的问题，但我只是不知道如何让它发挥作用。我想我应该使用媒体查询，但我有点困惑。我应该制作两个单独的样式表，还是只向 CSS 文件添加查询？ flex 只是在浪费我的时间，我是否应该让布局更加静态但依赖于设备大小？

我将非常感谢有关此问题的任何建议或资源，因为到目前为止，媒体查询不会在我的脑海中“点击”，而且我不知道如何使这个愚蠢的布局响应。

CSS：

#abt{
margin-top: 25%;
width: 100%;
display: flex;
flex-wrap: wrap;
}

#abttext{
padding: 0% 5% 0% 10%;
flex: 4;
}

#abtpic{
flex: 1;
}

HTML：

<div id="abt">
<div id="abttext"><h1>header</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p></div>
        <div id="abtpic"><img src="picture.png"></div>
    </div>

谢谢。

Answer 1

您可以在媒体查询中使用orientation，在portrait模式下将弯曲方向更改为column

堆栈sn-p

.abt {
  width: 100%;
  display: flex;
}

.abttext {
  padding: 0 5vw 0 10vw;
  flex: 4;
}

.abtpic {
  flex: 1;
}

@media (orientation: portrait) {
  .abt {
    flex-direction: column;
  }
}


/* demo styles */

.abttext {
  height: 100px;
  background: red;
}

.abtpic {
  height: 100px;
  background: blue;
}

<div class="abt">

  <div class="abttext">

  </div>

  <div class="abtpic">

  </div>

</div>