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

Question

如何设置媒体断点让我们说从中到大 - 我是否嵌套min mixin和max mixin或者我该怎么做.

我之后的输出是这样的:@media(min-width:480px)和(max-width:767px)使用断点mixin.

Answer 1

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

依赖

mixins在声明中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) {}

重要的提醒

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

• 断点的"较低"值是$ grid-breakpoint map中的声明值.

• 特定断点的"上限"值等于较高断点减去1px的值.

上下断点值示例(基于$ $ 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.

Answer 2

您将进行两门课程的组合。（BS4 现在使用 rems，而不是 px。）

示例...（来自：http ://codepen.io/j_holtslander/pen/jbEGWb ）

<!-- Jay's Viewport Helper -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
  <span class="hidden-sm-up">SIZE XS</span>
  <span class="hidden-xs-down hidden-md-up">SIZE SM</span>
  <span class="hidden-sm-down hidden-lg-up">SIZE MD</span>
  <span class="hidden-md-down hidden-xl-up">SIZE LG</span>
  <span class="hidden-lg-down">SIZE XL</span>
</div>
<!-- /Jay's Viewport Helper -->