(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模式下将FLEX方向更改为column

堆栈片段

.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>