Question

我使用flex创建了一个小网站，它有两列，一列是文本，第二列是图片。我认为它会自动包装在手机上，但它没有（Firefox中的移动视图在这里让我很困惑）。

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

我非常感谢有关此问题的任何建议或资源，因为到目前为止，媒体查询只是赢得了点击＆＃34;在我的头脑中，我不知道如何使这个愚蠢的布局响应。

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，并在column模式下将展示方向更改为portrait

Stack snippet

＆＃13;

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

＆＃13;

<div class="abt">

  <div class="abttext">

  </div>

  <div class="abtpic">

  </div>

</div>

＆＃13;

（CSS）移动设备的Flexbox和媒体查询

1 个答案: