Пользовательский медиа-запрос в приложении

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

В документации по начальной загрузке здесь 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.

Надеюсь, я оказал некоторую помощь.