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 媒体查询来包含标准样式，然后并排使用它，以便具有“上下”样式。即使将浏览器调整为 iPhone 大小，它仍会从 min-width 查询中获取样式。我对这在一个网格中运行得如此出色，但在内部网格中却完全不起作用感到相当恼火。 链接以获得更清晰的说明 以下是两张图片 - 第一张是当前的外观，规则根本没有应用或显示在检查器中。第二张图片 - 这是我希望在 700px 以下看到的外观，通过在检查器中取消勾选 grid-template-columns 实现。

- D. Winning

---

也许是我，但看起来一切都正常... - kukkuz

@kukkuz，我添加了一些图片，以便更清晰地展示 - 对你来说它仍然正常工作吗？在我的手机和笔记本电脑上，它仍然显示图像和文本并排，缓存已被清除。 - D. Winning

将<meta name="viewport" content="width=device-width, initial-scale=1">添加到您的页眉中？ - kukkuz

哇，通常我确保其中一行代码存在，但这次忽略了它，导致了这些问题 xD 已解决，谢谢！请随意将其放入答案中，我会接受。 - D. Winning

很酷，很高兴知道问题已经解决 :) - kukkuz

Answer 1

也许您忘记添加Viewport meta标签了？因为我尝试复制了您的代码，却没有遇到任何问题。"最初的回答"

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

- Keropon