跨应用程序的自定义媒体查询

Question

我正在使用angular7带有bootstrap 4.2.1的应用程序。 引导程序没有断点，但我只需要 3 个断点。 所以我在 3 个断点中更改了如下：

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';
$grid-breakpoints: (
    sm: 320px,
    md: 767px,
    lg: 1024px
);
$container-min-widths: (
  sm: 320px,
  md: 768px,
  lg: 1024px
);
@import "~bootstrap/scss/bootstrap";
@include media-breakpoint-up(lg) {
    body{
        background:green;
    }
}
@include media-breakpoint-up(md) {
    body{
        background:yellow;
    }
}

现在我的应用程序只有 3 个断点和 min 宽度。 当我为md编写类属性时，它也适用于lg。 这里出了什么问题。 如何自定义 3 个断点并将属性写入它们？

Answer 1

在 bootstrap 的 https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints 文档中，我发现media-breakpoint-up意味着min-with不是 max-with。

从文档：

从 min-width: 0 开始隐藏，然后在sm断点处显示

    .custom-class {
      display: none;
    }
    @include media-breakpoint-up(sm) {
      .custom-class {
        display: block;
      }
    }

我认为你应该使用media-breakpoint-only，因为引导程序说：

还有用于定位单个细分的媒体查询和混合 使用最小和最大断点宽度的屏幕大小。

例如这个

@include media-breakpoint-only(sm) { ... }

方法

@media (min-width: 576px) and (max-width: 767.98px) { ... }

另请查看media-breakpoint-between 。

我希望我能得到一些帮助。