Bootstrap 4-如何使用媒体查询Mixin

twitter-bootstrap CSS

猴子

2020-03-23

我该如何设置媒体断点，比如说从中到大-我是否嵌套了最小mixin和max mixin或该怎么做呢。

我需要的输出是这样的：@media（min-width：480px）and（max-width：767px）using breakpoint mixin。

第3015篇《Bootstrap 4-如何使用媒体查询Mixin》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

小哥蛋蛋 2020.03.23

采用 media-breakpoint-between($lower, $upper)

依存关系

mixins在中声明mixins/_breakpoints.scss，并取决于在中找到的$ grid-breakpoints映射_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) {}

重要通知

混合之间的媒体断点之间使用声明的断点的“较低”和“较高”值。

上和下断点值示例（基于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。

老丝 2020.03.23

这也是mixin media-breakpoint-between($lower, $upper)

所以这应该工作

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android