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

Posted

技术标签:

【中文标题】Bootstrap 4 - 如何使用媒体查询混合【英文标题】:Bootstrap 4 - how to use media query mixin 【发布时间】:2015-12-09 07:34:48 【问题描述】:

我如何设置媒体断点,比如说从中到大 - 我是嵌套最小混合和最大混合还是我该怎么做。

我追求的输出是这样的:@media (min-width: 480px) and (max-width: 767px) using the breakpoint mixin。

【问题讨论】:

【参考方案1】:

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

依赖关系

mixin 在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) 

重要通知

Media-breakpoint-between mixin 使用声明断点的 'lower' 和 'upper' 值。

断点的'lower'值是声明的值 $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 的断点。

【讨论】:

【参考方案2】:

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

所以这应该可以工作

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

【讨论】:

【参考方案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 -->

【讨论】:

这不能回答问题。他想在编译成媒体查询的 SCSS 文件中使用媒体混合。

以上是关于Bootstrap 4 - 如何使用媒体查询混合的主要内容,如果未能解决你的问题,请参考以下文章

如何为混合应用程序使用媒体查询

Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用

如何添加“定向媒体查询”来引导4 sass媒体查询

scss Bootstrap 4媒体查询

如何隐藏/删除基于 Bootstrap 媒体查询断点的类?

Java单体应用 - 常用框架 - 01.Bootstrap - 媒体查询