CSS網格，某些媒體查詢未應用

Question

我有一個由許多CSS網格組成的頁面。 我遇到麻煩的網格就是這個：

<div class="grid-two">

        <div class="list">

            <h1>Featured Opportunities</h1>

            <ul>

                ...

            </ul>

        </div>

        <div class="info">

            <div class="hand-logo">

                ...

            </div>

            <div class="info-right">

                ...

            </div>

        </div>

    </div>

以下CSS適用於外部div - grid-two ，然后是第二個內部div info ：

div.grid-two {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

div.grid-two div.info {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

以下媒體查詢已成功應用，將外部div轉換為單個圓柱網格：

@media only screen and (max-width: 980px) {
    div.grid-two {
        grid-template-columns: 1fr;
    }
}

以下不適用。 我無法在檢查器中看到它，但是當我查看源時，媒體查詢顯示，因此它不是緩存問題。

@media only screen and (max-width: 700px) {
    div.grid-two div.info {
        grid-template-columns: 1fr;
    }
}

我已經嘗試了很多東西 - 我嘗試使用min-width在媒體查詢中附加標准樣式，然后並排使用它，以便它具有“under and over”樣式。 它仍然從最小寬度查詢中獲取樣式，即使將瀏覽器調整為iPhone大小也是如此。 我很生氣，這在一個網格上工作得很好，但在內部網格上根本沒有。

鏈接清晰

下面的兩張圖片 - 第一張是當前的樣子，規則根本不適用或在檢查員中顯示。 第二個圖像 - 這是我希望它看起來低於700px，這是通過在檢查器中取消grid-template-columns實現的。

Answer 1

也許你忘了添加Viewport元？ 因為我試圖復制行為並且沒有使用您的代碼。

<meta name="viewport" content="width=device-width, initial-scale=1">