如何使用 Sass & bootstrap 4.1.3 在 Angular5 中添加媒体查询

Question

我一直在从事一个有多个页面的项目。它的网络版本几乎完成了，我现在需要进行响应式工作。 作为，我是 Angular 的新手，我想知道如何使用 SASS 和 Bootstrap 在 angular5 中添加媒体查询。

我对其进行了一些研发，并找到了一种在 css 文件中添加媒体的方法，如下所示：

/**** Define media breakpoint variables**/
$desktop: 960px
$tablet: 768px
$mobile-large: 640px
$mobile: 480px
$mobile-small: 300px

/**** mix your media queries inside a class that you want to change**/
.item
  width: 25%
  display: inline-block
  @media only screen and (max-width: $tablet)
    width: 50%
  @media only screen and (max-width: $mobile-large)
    width: 100%

什么是正确的标准。

谢谢

Answer 1

如果你使用 bootstrap 和 SASS，它可能是这样的：

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

文档中的更多信息：https://getbootstrap.com/docs/4.0/layout/overview/