什么是覆盖媒体查询？

Question

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

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

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

非常感谢您的帮助！

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>

Answer 1

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

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

什么是覆盖媒体查询？

What is overriding a media query?

media-queries