css - 在 css 中使用 Bootstrap 4 媒体查询

Question

我正在使用 ./node_modules/bootstrap/dist/css 中的 postcssEasyImport 导入 Bootstrap ，我想知道如何使用像 @screen 这样的媒体查询变量-md-min 或仅在 scss 中可用。

Answer 1

@screen-md-min 是一个 mixin，不是一个变量。 SASS 中的变量以 $ 为前缀，即 $colorVar，而 mixins 以 @ 为前缀。
Mixins 在 CSS 中不起作用，您需要一个预处理器(SASS、LESS 等)。
不过，你仍然可以在CSS中使用媒体查询，但你必须以特定的px宽度将它们打出来，这意味着

@media (min-width: @screen-md-min) {

}

在 SASS 中是

@media (min-width: 992px) {

}

在 CSS 中。

至于 CSS 中的变量，我建议阅读这篇关于 CSS-Tricks 的文章:https://css-tricks.com/difference-between-types-of-css-variables/

希望这对您有所帮助。