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