实施例

Question

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

之后的输出是这样的：@media（min-width：480px）和（max-width：767px）使用断点mixin。

Answer 1

使用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之间的媒体断点使用声明的断点的“低”和“高”值。

断点的'lower'值是声明的值 $ grid-breakpoint map。
特定断点的“上限”值等于更高的断点减1px。

Upper＆amp;较低的断点值示例（基于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的断点。

Answer 2

这里也是mixin media-breakpoint-between($lower, $upper)

所以这应该有用

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}

Answer 3

你做了两个类的组合。（另外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 -->

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

3 个答案:

实施例