问题描述
我如何设置媒体断点让我们说从中到大 - 我是嵌套 min mixin 和 max mixin 还是我该怎么做.
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.
我想要的输出是这样的:@media (min-width: 480px) 和 (max-width: 767px) 使用断点 mixin.
the output I'm after is something like this: @media (min-width: 480px) and (max-width: 767px) using the breakpoint mixin.
推荐答案
使用 media-breakpoint-between($lower, $upper)
依赖关系
mixin 在 mixins/_breakpoints.scss
中声明,并依赖于 _variables.scss
中的 $grid-breakpoints 映射.
The mixins are declared in mixins/_breakpoints.scss
, and depend on the $grid-breakpoints map, found in _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 使用声明断点的下"和上"值.
Media-breakpoint-between mixin uses 'lower' and 'upper' values of declared breakpoint.
断点的'lower'值是在$grid-breakpoint 映射.
The 'lower' value of breakpoint is the declared value in$grid-breakpoint map.
特定断点的'upper'值等于更高的断点减去 1px.
The 'upper' value of specific breakpoint is equal to the value ofhigher breakpoint minus 1px.
上&下断点值示例(基于 od $grid-breakpoint map)
Upper & lower breakpoint values example (based 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-up(sm) {}
creates a breakpoint with a min-width of $sm
.
@include media-breakpoint-down(md) {}
创建一个最大宽度为 $md
的断点.
@include media-breakpoint-down(md) {}
creates a breakpoint with a max-width of $md
.
这篇关于Bootstrap 4 - 如何使用媒体查询 mixin的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!