是否可以像“@include media-breakpoint-up(900px)”（bootstrap4）那样以像素为单位设置断点？

Question

我可以在 Bootstrap 4 中使用 @include media-breakpoint-up(900px) 构建媒体查询吗？

例如，如果我使用：

@include media-breakpoint-up(900px){
   body: border 2px solid;
}

.css 中的输出将没有媒体查询 -> like this

或者只能通过创建新断点来完成:

$grid-breakpoints: (
    // default breakpoints

    custom-lg: 90px,
);

并使用 like

@include media-breakpoint-up(custom-lg){
   body: border 2px solid;
}

Answer 1

如果查看 media-breakpoint-up mixin，您会发现它需要 $name 参数，这是断点的名称， 而不是 像素值..

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    ...
}

但是您可以传入另一个 $breakpoints 映射（第二个参数），其中包含 lg...

的新值

@include media-breakpoint-up(lg,(lg:900px)){
   body { 
       border: solid red 2px;
   }
}

Codeply

相关：