Question

在阅读引导程序文档时，我看到以下代码片段：

    @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在内部使用它们创建断点吗？这种魔术/穿透力在哪里发生？

Answer 1

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类的地方，它们被包含在指定设备大小的media-query中，可以说我们在小型设备上呈现html，下面的media查询为true，因此这些CSS类将是如果应用了其他类md，lg和xl，则不会被应用，因为包含它们的媒体查询将不成立。在您的html模板中，您需要指定所有可能性，例如col-sm-12 col-md-12 col-lg-6 col-xl-6（这意味着在sm和md屏幕中分配12个网格空间，在lg和xl屏幕中分配6个网格给定列）

@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%;
  }
....
....

引导程序如何评估media-breakpoint-up参数？

1 个答案: