如何设置媒体断点让我们说从中到大 – 我是否嵌套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的断点.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。