twitter-bootstrap Bootstrap 4 - 如何使用媒体查询 mixin
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32545506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - how to use media query mixin
提问by user1678736
How do I set a media breakpoint let's say from medium to large - do I nest the min mixin and max mixin or how do I do that.
我如何设置媒体断点让我们说从中到大 - 我是否嵌套了最小混合和最大混合，或者我如何做到这一点。
the output I'm after is something like this: @media (min-width: 480px) and (max-width: 767px) using the breakpoint mixin.
我所追求的输出是这样的：@media (min-width: 480px) 和 (max-width: 767px) 使用断点混合。
回答by Edd
Use media-breakpoint-between($lower, $upper)
利用 media-breakpoint-between($lower, $upper)
Dependencies
依赖关系
The mixins are declared in mixins/_breakpoints.scss, and depend on the $grid-breakpoints map, found in _variables.scss.
mixin 在 中声明mixins/_breakpoints.scss，并依赖于 $grid-breakpoints 映射，在 中找到_variables.scss。
Example
例子
Breakpoint map:
断点图：
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
)
Mixin:
混合：
@include media-breakpoint-between(sm, md) {
// your code
}
Compiles to
编译为
@media (min-width: 576px) and (max-width: 991px) {}
Important notice
重要通知
Media-breakpoint-between mixin uses 'lower' and 'upper' values of declared breakpoint.
Media-breakpoint-between mixin 使用声明断点的“下”和“上”值。
The 'lower' value of breakpoint is the declared value in $grid-breakpoint map.
The 'upper' value of specific breakpoint is equal to the value of higher breakpoint minus 1px.
断点的 'lower' 值是 $grid-breakpoint 映射中的声明值。
特定断点的“上”值等于上断点的值减去1px。
Upper & lower breakpoint values example(based od $grid-breakpoint map)
上下断点值示例（基于 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)
Other media mixins
其他媒体混合
@include media-breakpoint-up(sm) {}creates a breakpoint with a min-width of $sm.
@include media-breakpoint-up(sm) {}创建一个最小宽度为 的断点$sm。
@include media-breakpoint-down(md) {}creates a breakpoint with a max-width of $md.
@include media-breakpoint-down(md) {}创建一个最大宽度为 的断点$md。
回答by ondrejruzicka
Here is also mixin media-breakpoint-between($lower, $upper)
这里也是mixin media-breakpoint-between($lower, $upper)
So this should work
所以这应该有效
@include media-breakpoint-between(sm, md){
// this applies only between the sm and ms breakpoints
}
回答by Jay
You do a combo of two classes. (Also BS4 uses rems now not px.)
你做两个班级的组合。（而且 BS4 现在使用 rems 而不是 px。）
Example... (From: http://codepen.io/j_holtslander/pen/jbEGWb)
示例...（来自：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 -->
