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

我如何设置媒体断点，例如从中到大-我是否嵌套了最小mixin和max mixin或该怎么做呢。

我需要的输出是这样的:@media(min-width:480px)and(max-width:767px)using breakpoint 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
)

Mixin:

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

编译为

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

重要通知
混合之间的媒体断点之间使用声明的断点的“较低”和“较高”值。

断点的“较低”值是其中的声明值
$ grid-breakpoint map 。

特定断点的“上限”值等于
更高的断点减去1px。

上下断点值示例(基于od $ grid-breakpoint映射)

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)

其他媒体mixins @include media-breakpoint-up(sm) {}创建一个最小宽度为$sm的断点。@include media-breakpoint-down(md) {}创建一个最大宽度为$md的断点。

关于twitter-bootstrap - Bootstrap 4-如何使用媒体查询Mixin，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32545506/