我想針對移動設備優化我的屏幕，因此當方向為縱向時，我會將帶有文本的黃色部分向下移動到白色備用區域。我需要嗎media query？我無法計算白色區域的可用高度。https://i.stack.imgur.com/Knket.gif <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并檢查白色可用空間。
3 回答
守著一只汪
TA貢獻1872條經驗 獲得超4個贊
orientation您可以在媒體查詢中使用：
@media screen and (orientation:portrait) {
[... your CSS rules for portrait mode here ...]
}
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
彎曲方向列+環繞可以幫助檢測下面的可用空間。
.main {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
.pink {
background-color: pink;
padding-bottom: 55%;
}
.yellow {
background-color: yellow;
}
<div class="main">
<div class="pink"></div>
<div class="yellow">Text</div>
</div>
米琪卡哇伊
TA貢獻1998條經驗 獲得超6個贊
.flexcontainer {
display: flex;
flex-direction: row;
}
.pink {
width: 80%;
background: pink;
}
.yellow {
width: 20%;
background: yellow;
}
@media (max-width: 1000px) {
.flexcontainer {
flex-direction: column;
}
.pink {
width: 100%;
}
.yellow {
width: 100%;
}
}
<div class="flexcontainer">
<div class="pink">Test</div>
<div class="yellow">Text</div>
</div>
@media query是的，當您必須使用不同的屏幕尺寸和方向并且您不希望將此邏輯內聯到元素上時，您當然需要。您需要確定元素應占據整個寬度的寬度。
- 3 回答
- 0 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消