Как при начальной загрузке вычисляются параметры точки прерывания носителя? - PullRequest
Новая
       71

Как при начальной загрузке вычисляются параметры точки прерывания носителя?

0 голосов
/ 01 октября 2019

Читая документацию по начальной загрузке, я вижу следующие фрагменты кода: 

    @include media-breakpoint-up(sm) { ... }
    @include media-breakpoint-up(md) { ... }
    @include media-breakpoint-up(lg) { ... }
    @include media-breakpoint-up(xl) { ... }

Являются ли эти глобальные переменные Sass (sm, md, lg, xl) и Bootstrap используетих внутренне, чтобы создать точки останова? Где происходит это волшебство / трансформация?

1 Ответ

1 голос
/ 01 октября 2019

Документация по Bootstrap предполагает, что 

(extra small devices - screen width less than 576px)
sm- (small devices - screen width equal to or greater than 576px)
md- (medium devices - screen width equal to or greater than 768px)
lg- (large devices - screen width equal to or greater than 992px)
xl- (xlarge devices - screen width equal to or greater than 1200px)

Так вот где его разрывы, когда он встречает sm md lg и xl

В bootstrap-grid.css именно здесь определяются медиазапросы 

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

и ниже, где определены классы sm, и они заключены в медиа-запрос, который определяет размер устройства. Допустим, мы отрисовываем наш html на небольшом устройстве, нижеприведенный медиа-запрос - истина, и поэтомуэти классы CSS будут применены, другие классы md, lg и xl не будут применены, так как медиа-запросы, в которые они включены, не будут истинными. В вашем HTML-шаблоне вам нужно указать все возможности, такие как col-sm-12 col-md-12 col-lg-6 col-xl-6 (то есть выделить 12 пространств сетки на экранах sm и md и 6 сеток на экранах lg и xlдля данного столбца) 

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
....
....
...