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

Question

如何设置媒体断点让我们说从中到大 - 我是否嵌套最小混合和最大混合或者我该怎么做。

我之后的输出是这样的:@media (min-width: 480px) and (max-width: 767px) 使用断点混合。

Answer 1

使用media-breakpoint-between($lower, $upper) 依赖
mixin 在 mixins/_breakpoints.scss 中声明。 ，并取决于 $grid-breakpoints 映射，在 _variables.scss 中找到.
例子
断点图:

$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) {}

重要通知
media-breakpoint-between mixin 使用声明断点的 'lower' 和 'upper' 值。

断点的“较低”值是声明的值
$grid 断点图。

特定断点的“上”值等于
更高的断点 - 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 的断点.