什么是覆盖媒体查询？答案

【问题标题】：What is overriding a media query?什么是覆盖媒体查询？
【发布时间】：2020-10-11 04:27:07
【问题描述】：

我正在练习 css-grid 和媒体查询。当我为 max-width 768px 添加媒体查询时，当我将屏幕缩小到该尺寸时，没有任何反应，我仍然看到 4 列而不是我尝试应用的 2 列。

我正在使用 Visual Studio Code 和实时服务器。我已经尝试直接在 Finder 中打开 html（我使用的是 mac os），我已经刷新了页面，但仍然有同样的问题。

当我的屏幕尺寸低于 768 像素并且当我检查文件时，我在下面看到这些消息时，某些东西会覆盖该媒体查询。我该如何解决这个问题或我在这里做错了什么？

非常感谢您的帮助！

body {
  background: green;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 1rem;
}

@media (max-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat (2, auto);
  }
}

<body>
    <div class="grid">
        <div class="item">
            <h3>Heading 1</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>
        <div class="item">
            <h3>Heading 2</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>
        <div class="item">
            <h3>Heading 3</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>
        <div class="item">
            <h3>Heading X</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>

    </div>
</body>

【问题讨论】：

不看你的 CSS 怎么能这么说？
@ShivamJha 我刚刚在 1-2 分钟前添加了一个 sn-p？我看到了！
它不是覆盖，它只是说你的代码不正确

标签： media-queries

【解决方案1】：

单词 repeat 和左括号之间有一个空格。删除它，一切都应该没问题。

黄色警告三角形表示该行有问题。

【讨论】：

很高兴它奏效了 - 知道什么时候空间很重要，而它们通常不重要，这可能会让人感到困惑。
如此真实！我花了很多时间尝试不同的解决方案，我向你保证我永远不会忘记这个空间的重要性哈哈