html - 媒体查询出现问题，显示何时应执行常规CSS，反之亦然

当我在笔记本电脑/台式机视图中时，常规CSS样式在inspect元素中被划掉，并且查询样式处于活动状态。为什么会这样呢？

例如，下面是我的nav部分的代码（起初我主要关注的地方，因为到目前为止，当我将目标定位为某些元素时，以响应方式，在我注意到此问题之前，我已经设法做到了）。

我已经尝试确保元素名称，div和id都正确。我还使用了百分比和像素，它们都相同且可以互换。我还确保我没有两个相同的最小宽度媒体查询，这将取消这两个查询之一。

的CSS

/* Nav Section */
    a.navbar-brand{
      font-size: 90% !important;
    }
/* About Section */

    .mlAboutSec{
      padding: 112px 0;
      background-color: #f9f9f9;
    }
    .mlAboutSec h1{
      font-size: 40px;
    }
    @media screen and (min-width:320px){
    .mlAboutSec h1{
      font-size: 20px !important;
    }
    .img-responsive{
      width: 50% !important;
    }
    a.navbar-brand{
      font-size: 90% !important;
    }
  }

HTML

  <div class="mx-auto order-0">
    <a class="navbar-brand" href="#">Sample Logo Text</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="jumbotron jumbotron-fluid text-center">
<img src="LogoImage.png" class="img-responsive" alt="Logo Image">
</div>

<div class="col-sm-8 fadeInUp animate">
        <h1>About Section</h1>
        <p>Sample Text Description about stuff goes here for the reader to view.</p>
    </div>

我希望减小字体大小以提高移动可读性，并希望将徽标图像缩小以更好地实现移动观看目的。

最佳答案

您说您的默认样式已被您的移动样式替换为桌面样式，如果我们检查您的样式，我们可以知道原因。

声明常规样式后，立即包含一个表示为min-width: 320px的媒体查询。

.mlAboutSec h1 {
  font-size: 40px;
}
@media screen and (min-width: 320px) {
  .mlAboutSec h1{
    font-size: 20px !important;
  }
  .img-responsive {
    width: 50% !important;
  }
}

这意味着您的媒体查询样式将在至少320像素宽的任何屏幕（即使是远远大于该像素宽的桌面）上显示。实际上，实际上，永远不会应用您的常规样式，因为它们只会出现在0到319px的宽度之间，甚至市场上一些最小的智能手机（例如iPhone SE）也都是320px的宽度。

如果要声明桌面的默认样式并在移动设备上覆盖它们，最简单的方法是在媒体查询中将min-width替换为max-width，而无需进行其他任何更改。一切都会完全按照您的预期进行。

但是，我在评论中看到您正在采用移动优先的方法。在这种情况下，您需要颠倒整个方法。您的移动样式将是默认样式，然后您的桌面样式将进入媒体查询。

例如：

.mlAboutSec h1 {
  font-size: 20px;
}
.img-responsive{
  width: 50%;
}
@media screen and (min-width: 992px) {
  .mlAboutSec h1 {
    font-size: 20px;
  }
  .img-responsive{
    width: 100%;
  }
}

还要注意的另一件事是，由于我在评论中看到了有关将媒体查询简单地移到样式表顶部的可能性的讨论：的确，CSS级联到工作表的下方是正确的，所以样式越低，样式将覆盖样式越高的样式，这仅是如果这些样式的选择器具有相同的特异性，则为true。媒体查询比普通样式更具体，因此无论它们位于样式表的顶部还是底部，其他所有条件都相同时，它们最终将覆盖您的普通样式。（这就是说，如果添加!important或从.mlAboutSec h1更改为.mlAboutSec.someOtherClass h1或其他名称，事情会变得更加复杂。）

为了保持简单性，我建议您将媒体查询保留在样式表的底部，或者至少立即遵循它们各自的默认样式，然后使用上述两种方法之一适当地修改内容，以便按预期出现。

请注意，在上面具有移动优先方法的示例中，在任何地方都不需要!important，因为在媒体查询的内部和外部选择器都完全相同，并且媒体查询在默认选择器之后进行，因此之间没有任何分歧特异性和级联。