在媒体查询中不执行CSS

我试图使桌面大小的网站响应。就在我开始的时候，我注意到CSS规则是由浏览器读取的，但是不管媒体查询规则是否正确，它都不会执行。我包括了

，没有变化。我无法找到浏览器的逻辑以及为什么它不阅读它

div class="nav">
   <div class="logo"><a href="index.html">GETTI</a></div>
   <div class="nav-menu">
      <div class="menu-item"><a href="#">Home</a></div>
      <div class="menu-item"><a href="#">Why Choose Us</a></div>
      <div class="menu-item"><a href="#">How it works</a></div>
      <div class="menu-item"><a href="#">Teams</a></div>
      <div class="menu-item"><a href="#">Contacts</a></div>
    </div>

我确信这与正常（非响应性）CSS的编写方式有关，所以我也将包括这一点

.nav-menu {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (20%)[auto-fill];
    grid-template-columns: repeat(auto-fill, 20%);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    line-height: 100%;
}

---

如果CSS规则符合您在问题中发布的顺序（即先是媒体查询，然后是一般规则），则一般规则将始终覆盖媒体查询中的规则（因为它们对任何屏幕大小都有效）。只需更改顺序以避免出现这种情况：首先是一般规则，然后是媒体查询。

如果CSS规则与您在问题中发布的顺序一致（即先是媒体查询，然后是一般规则），则一般规则将始终覆盖媒体查询中的规则（因为它们对任何屏幕大小都有效）。只需更改顺序以避免出现这种情况：首先是一般规则，然后是媒体查询。

当浏览器宽度小于768px时，您希望

nav菜单

消失吗？我使用您提供的代码对此进行了测试，我看到了这种行为。您希望发生什么事吗？您的代码（媒体查询）也可以在我的计算机上运行。您希望当浏览器宽度小于768px时，

nav菜单

会消失吗？我使用您提供的代码对此进行了测试，我看到了这种行为。您希望发生什么事情吗？您的代码（媒体查询）也可以在我的计算机上运行。是的，谢谢。显然，我必须编写整个嵌套类，而不仅仅是键入类。我不知道。是的，谢谢。显然，我必须编写整个嵌套类，而不仅仅是键入类。我不知道。

.nav-menu {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (20%)[auto-fill];
    grid-template-columns: repeat(auto-fill, 20%);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    line-height: 100%;
}