为什么 Bootstrap 4.4.1 媒体查询不起作用？答案

【问题标题】：Why is Boostrap 4.4.1 Media query not working?为什么 Bootstrap 4.4.1 媒体查询不起作用？
【发布时间】：2020-07-03 07:25:26
【问题描述】：

我正在尝试使用带有 Bootsrtap 4.4.1 的媒体查询向我的 Web 应用程序添加响应式设计。

我已尝试使用以下方法测试媒体查询

这是我的styles.css

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

@include media-breakpoint-up(sm) {
  .buttons {
    background-color:rgba(255,180,50,0.7);
  }
}

当我在小型设备上进行测试时，没有任何变化。当我运行应用程序时，我看到样式出现在 chrome 开发工具中，但没有应用。

我在这里遗漏了什么吗？我是否需要导入任何内容才能通过 Bootsrtap 使用媒体查询？
我应该使用哪个规则@include 还是只使用@media？

【问题讨论】：

标签： css bootstrap-4 styles media-queries

【解决方案1】：

这些媒体查询是否在您的 styles.css 的末尾？您的 styles.css 文件必须在引导 css 文件之后的标题中声明。现在有些东西会覆盖您的媒体查询。

【讨论】：

【解决方案2】：

如果你能创建一个小例子 / 那么我们可以确定问题不在项目的其他地方。

@include 用于在使用 SCSS/Sass 时包含 mixins /。 575.98px 也是一个百搭数字。您不应该使用十进制 pxls。没有什么是那么具体的。也许你可以在 CSS Discord 中更详细地解释它：https://discord.gg/pFc6XmH

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

https://jsfiddle.net/sheriffderek/q8jz7Lt9

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

@media (min-width: 700px) {
  .thing {
    background-color: orange;
  }
}

<div class="thing">
  THING!
</div>

【讨论】：

谢谢德里克！我刚刚修复了分辨率并尝试在不同的元素上使用它，它可以工作！由于某种原因，它在 . 上不起作用
我建议你创建一个 CodePen 或 JSfiddle 来给我们看一个例子。

【解决方案3】：

我只是想确认这个问题现在已经解决了。我忽略了这样一个事实，即我在<body> 上有一个背景图像，所以这个 sn-p 不起作用。

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

一旦我删除了背景图像，就会应用该样式。感谢您的帮助和洞察力！

【讨论】：