如何设置媒体断点让我们说从中到大 – 我是否嵌套min mixin和max mixin或者我该怎么做.
我之后的输出是这样的:@media(min-width:480px)和(max-width:767px)使用断点mixin.
解决方法
使用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之间的介质断点使用声明的断点的“低”和“高”值.
>断点的“较低”值是声明的值
$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的断点.