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

我正在使用

angular7

应用程序和

bootstrap4.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个断点并将属性写入其中？

在这里的bootstrap文档中，我发现

媒体断点向上

意味着

最小值带

而不是最大值带

来自文档：

从

minwidth:0开始隐藏，然后在
sm
断点处显示

我认为您应该只使用
媒体断点
，正如bootstrap所说：

还有针对单个细分市场的媒体查询和混合
使用最小和最大断点宽度的屏幕大小

比如这个

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

意味着

还可以查看

之间的

媒体断点

我希望我能提供一些帮助

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

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