twitter-bootstrap – Bootstrap 4 – 如何使用媒体查询mixin

发布时间：2020-12-18 00:18:06 所属栏目：安全来源：网络整理

导读：如何设置媒体断点让我们说从中到大 – 我是否嵌套min mixin和max mixin或者我该怎么做. 我之后的输出是这样的：@media(min-width：480px)和(max-width：767px)使用断点mixin. 解决方法使用media-breakpoint-between($lower,$upper) 依赖 mixins在mixins / _

如何设置媒体断点让我们说从中到大 – 我是否嵌套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的断点.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!