即使屏幕尺寸匹配，也不會應用媒體查詢

Question

我有這個問題：當屏幕尺寸合適時（在本例中，小於 768 像素），媒體查詢不適用。

這是我的元素：

<div class="container d-flex flex-column flex-md-row ">
   ...
</div>

以下是課程：

@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row;
    }
}

.flex-column {
    flex-direction: column;
}

這些是根據 Chrome Webdev 工具應用它們的方式：

是的，我的“頭腦”中有這個標簽： <meta name="viewport" content="width=device-width, initial-scale=1.0">

既然一切都匹配，為什么不應用“flex-column”而不是“flex-md-row”。

Answer 1

這是因為 CSS 的級聯靈魂你在.flex-md-row中說過 768px flex-direction上面應該有row值

但

在你說的下面（在.flex-column內）任何大小flex-direction都應該有column值

並且你將兩個類都設置為你的 html 元素......在 CSS 中后者將贏得對手......（如果選擇器優先級相等）

嘗試替換您的媒體查詢和其他選擇器

在 RWD 中，最好在較小的值下方添加較大值的媒體查詢，就像 bootstrap 一樣

.flex-column {
    flex-direction: column;
}
@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row;
    }
}

這應該工作

Answer 2

使用最大值而不是最小值 例如：（最大寬度：69px）