（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

堆棧片段

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