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

Question

我正在使用 angular7 应用程序和 bootstrap 4.2.1。 bootstrap 有 no.of 个断点，但我只需要 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 写 class 属性时，它也适用于 lg。这里出了什么问题。如何自定义in到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 正如 bootstrap 所说：

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

比如这个

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

表示

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

另请查看 media-breakpoint-between。

希望能帮到你

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

Custom Media query across application

css

bootstrap-4

angular7