Html 媒体查询问题，显示何时应执行常规css，反之亦然

当我在膝上型电脑/桌面视图中时，常规CSS样式在inspect元素中被划掉，查询样式处于活动状态。为什么会这样

例如，我最初主要关注的nav部分的代码，因为在我注意到下面这个问题之前，这是我迄今为止以响应的方式针对某些元素所获得的全部

我已尝试确保元素名称、div和id。。所有这些都是准确的。我还使用了百分比和像素，两者都是相同的，可以互换。我还确保没有两个相同的最小宽度媒体查询，这将取消其中一个

CSS

Html

---

我希望两种字体的大小都会减小，以便于移动阅读，同时徽标图像也会缩小，以便更好地移动查看。

您说您的默认样式在桌面上被移动样式覆盖，如果我们检查您的样式，我们可以了解原因

声明正常样式后，立即包含一个媒体查询，该查询显示min width:320px

这意味着您的媒体查询样式将适用于任何至少320像素宽的屏幕，甚至是大大超过该宽度的桌面。事实上，事实上，你的普通风格永远不会被应用，因为它们只会出现在0到319px宽之间，甚至市场上一些最小的智能手机，例如iPhone SE，也只有320px宽

如果您想为桌面声明默认样式并在移动设备上覆盖它们，最简单的方法就是在媒体查询中将“最小宽度”切换为“最大宽度”，而无需更改任何其他内容；一切都会完全按照你的预期进行

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

例如：

.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确实沿着样式表向下级联，所以向下的样式将覆盖向上的样式，但只有当这些样式的选择器具有相同的特殊性时，这才是正确的。媒体查询比普通样式更具体，因此最终将覆盖您的普通样式，无论它们位于样式表的顶部还是底部，所有其他条件都相同。也就是说，如果你加入一个！重要或从.mlAboutSec h1更改为.mlAboutSec.someOtherClass h1或其他内容，事情会变得更复杂

为了保持简单性，我建议您将媒体查询保持在样式表的底部，或者至少紧跟在它们各自的默认样式之后，然后使用上面两种方法中的一种来适当地修改内容，以便按照您的预期进行

---

注意，在上面的示例中，我使用了移动优先的方法，没有！任何地方都需要“重要”，因为选择器在媒体查询内外都完全相同，媒体查询位于默认选择器之后，在特异性和级联之间没有任何分歧。

所以我所做的只是更改所有文本/标题/链接的字体大小，以便在所有设备上仍然可以轻松阅读。事实证明，这就是我真正需要做的一切，奇怪的是，缩放效果很好。谢谢大家的宝贵意见。我把每一点都考虑进去了

你确定这不仅仅是打字错误？听起来你对媒体查询有很好的理解，但是你的媒体查询CSS说的是min width，而不是max。我选择的是mobile first概念，所以min width似乎是该方法的首选。我试着用max width替换minwidth，这样做时，inspect元素中没有显示媒体查询，但常规样式会显示。你是说，对超过320px的所有内容运行此媒体查询，这实际上是难以置信的小，即使是大多数手机。它还将从上到下呈现，因此将覆盖它上面的任何内容。@ThomasByy，那么我应该先进行查询吗？在常规造型之前？我以为你应该在查询之前写常规样式。我想应该先写移动第一概念的查询。我还没有真正订阅移动第一概念，但我想象你在顶部创建你的移动风格，然后让你的媒体查询说最小宽度：900px平板电脑，然后最小宽度：1200px台式机，所以它创建了移动尺寸，然后说这是平板电脑吗？好的，改用这些样式，或者这是桌面，改用这些样式。

  <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>

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

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