我有一個非常簡單的兩列布局，我試圖讓它回應，但媒體查詢一直被擊敗。
<div class="flex-container">
<div class="flex-item-left is-mobile">1</div>
<div class="flex-item-right is-mobile">2</div>
</div>
這是CSS：
.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media screen and (max-width: 800px) {
.flex-item-right.is-mobile, .flex-item-left.is-mobile {
flex: 100% !important;
}
}
CSS 的特殊性在這里起作用嗎？奇怪的是它適用于螢屏調整大小，但不適用于實際的移動設備。
uj5u.com熱心網友回復：
所以我必須回答我自己的問題，這樣它才能幫助別人。問題是我沒有viewport為移動設備設定，頁面在非移動視口模式下呈現。從另一個帖子：
您需要將視口元標記設定為 content="width=device-width, initial-scale=1"。這告訴瀏覽器以設備螢屏的寬度呈現頁面的寬度。因此，如果該螢屏是 320 像素寬，瀏覽器視窗將是 320 像素寬，而不是縮小并顯示 960 像素（或該設備默認執行的任何操作）。
<meta name="viewport" content="width=device-width, initial-scale=1">
uj5u.com熱心網友回復：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-lg-6 col-12 bg-danger">
1 of 2
</div>
<div class="col-lg-6 col-12 bg-primary">
2 of 2
</div>
</div>我建議你使用引導程式。有不同的回應模式
https://getbootstrap.com/docs/4.0/layout/grid/
uj5u.com熱心網友回復：
width: 100%
對于 flex-item-left 和 flex-item-right
或這個：
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411134.html
標籤：
下一篇：如何使用圓形半徑的按鈕附加選擇