twitter-bootstrap – Bootstrap 4 – 如何使用媒体查询mixin

使用media-breakpoint-between($lower,$upper)

依赖

mixins在mixins / _breakpoints.scss中声明,并依赖于_variables.scss中的$grid-breakpoints映射.

例

断点图：

$grid-breakpoints: (
  xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px
)

混入：

@include media-breakpoint-between(sm,md) {
    // your code
}

编译成

@media (min-width: 576pX) and (max-width: 991pX) {}

重要的提醒

mixin之间的介质断点使用声明的断点的“低”和“高”值.

>断点的“较低”值是声明的值
$grid-breakpoint map.
>特定断点的“上限”值等于
较高的断点减去1px.

上部&较低的断点值示例(基于od $grid-breakpoint map)

Lower value of md is equal to 576
Upper value of md is equal to 991 ( value of next breakpoint (lg) minus 1px (992px-1pX)

其他媒体混合

@include media-breakpoint-up(sm){}创建一个最小宽度为$sm的断点.

@include media-breakpoint-down(md){}创建一个最大宽度为$md的断点.