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

Question

当我在 laptop/desktop 视图中时，常规 CSS 样式在 inspect 元素中被划掉，并且查询样式处于活动状态。为什么会这样？

例如，我的导航部分代码（我最初主要关注的地方是，因为这是我到目前为止在定位某些元素时设法获得的所有内容，在我注意到此问题之前响应）如下。

我已尝试确保元素名称、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>

我希望两种字体大小都可以减小以提高移动设备的可读性，同时徽标图像也可以缩小以便更好地在移动设备上查看。

Answer 1

你说你的默认样式在桌面上被你的移动样式覆盖了，如果我们检查你的样式，我们就能明白原因。

在你声明了你的普通样式之后，你就包含了一个媒体查询 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 到 319 像素宽之间，甚至市场上一些最小的智能手机（例如，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%;
  }
}

另一件需要注意的事情，因为我在评论中看到了关于将媒体查询简单地移动到样式顶部的可能性的讨论sheet：虽然 CSS 级联 sheet，因此较低的样式将覆盖较高的样式，只有当这些样式的选择器具有相同的特异性时才会如此。媒体查询比普通样式更具体，因此最终会覆盖您的普通样式，无论它们位于样式的顶部还是底部sheet，其他条件相同。（也就是说，如果您添加 !important 或从 .mlAboutSec h1 更改为 .mlAboutSec.someOtherClass h1 或其他内容，事情会变得更加复杂。）

为了保持简洁，我建议您将媒体查询放在样式的底部sheet或者至少紧跟在它们各自的默认样式之后，然后使用上述两种方法之一进行修改事情得当，事情就会如你所愿。

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

Answer 2

所以我所做的只是更改所有 text/headings/links 的字体大小，以便在所有设备上仍然可以轻松阅读。事实证明，这就是我真正需要做的一切，并且缩放有效，这很奇怪。感谢大家提供的所有有用信息。我考虑到了每一点！

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

Issue with media query showing when regular css should be executed, and visa versa

html

css

media-queries

bootstrap-4