媒体查询中不执行 CSS答案

【问题标题】：CSS is not executed in media query媒体查询中不执行 CSS
【发布时间】：2020-09-12 16:30:14
【问题描述】：

我正在尝试使桌面大小的网站具有响应性。刚开始时，我注意到浏览器会读取 CSS 规则，但是无论媒体查询规则是否为真，它都不会执行。我包括了<meta content="width=device-width, initial-scale=1" name="viewport" />，没有变化。我无法找到浏览器的逻辑以及它为什么不阅读它。

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：

@media screen and (max-width: 768px) {
    body {
        width:100%;
    }
    .nav-menu {
        display:none;
    }
}

我以某种方式确定它与普通（非响应式）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%;
}

【问题讨论】：

您希望nav-menu 在浏览器宽度小于768px 时消失？我使用您提供的代码对此进行了测试，我看到了这种行为。有没有你预期会发生的事情？
你的代码（媒体查询）也可以在我的电脑上运行。

标签： css media-queries responsive

【解决方案1】：

如果 CSS 规则按照您在问题中发布的顺序（即首先是媒体查询，然后是一般规则），一般规则将总是覆盖来自媒体查询的规则（因为它们适用于任何屏幕尺寸）。只需更改顺序即可避免这种情况：首先是一般规则，然后是媒体查询。

【讨论】：

好的，谢谢。显然，我必须编写整个嵌套类，而不仅仅是键入类。不知道。