如何将“方向媒体查询”添加到 bootstrap 4 sass 媒体查询

Question

我在我的 scss 文件中使用“vanilla”bootstrap 4 sass 媒体查询：

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

我知道如果我使用 css 宽度媒体查询，我可以将它与方向媒体查询结合使用，但我想使用 sass 框架。 我想在其中添加定向媒体查询，即 XS 之一。因此它是具体的。因为如您所知，bootsrap 4 目前（奇怪地）不支持方向查询。

我尝试以不同的方式将“方向查询”与“SASS 引导媒体查询 (xs)”连接起来，但我总是遇到 sass 错误。

因此我所做的是将它嵌套在 SASS 引导媒体查询 (xs) 中：

@include media-breakpoint-up(xs){

... some SCSS rules

  @media (orientation: landscape){
     header{
     display:none !important;   
     } 
     .navbar{ 
     display:none !important;   
     } 
  }
}

我什至认为它嵌套在 XS 查询中的问题是它适用于所有断点。好像它没有考虑嵌套。

我的问题：如何将“方向查询”与“SASS 引导媒体查询 (xs)”连接起来？或者如何通过嵌套使其特定于 XS 断点。

谢谢

Answer 1

我找到了解决方案。

可以通过嵌套来组合 sass mixin，因此我在我的 _mixins.scss 文件中创建了以下 mixin：

@mixin orientation($direction) { 

  $orientation-landscape: "(orientation:landscape)"; 
  $orientation-portrait: "(orientation:portrait)";

  @if $direction == landscape {
    @media #{$orientation-landscape} { @content; } 
  }
  @if $direction == portrait {
    @media #{$orientation-portrait} { @content; } 
  }
} 

注意：我没有将“and”放在变量值中：“and (orientation:landscape)”。我想 SASS 或 bootstrap 会自动放置它。

然后在我的 SCCS 文件中添加了以下规则：

@include media-breakpoint-down(sm) {
  @include orientation(landscape) {
    .path-frontpage header {
      display: none !important;
    }
    .path-frontpage .navbar {
      display: none !important;
    }
  }
}

注意： 在我的第一篇文章中，我说我嵌套的 CSS 规则已应用于所有断点，这是因为在生成 CSS 时，SASS Bootstrap 4 XS 断点不是写，我想这是因为该值为0。因此方向媒体查询没有与最小宽度值结合。所以我将值更改为最大宽度而不是最小宽度，因为 Bootstrap 4 SM 断点具有 576px 值。

CSS 文件中的结果是我想要的：

@media (max-width: 767.98px) and (orientation: landscape) {
  .path-frontpage header {
    display: none !important;
  }
  .path-frontpage .navbar {
    display: none !important;
  }
}

希望对社区有所帮助。

Answer 2

我在 Bootstrap 之外使用它。您应该能够将它与 Bootstrap 或任何其他框架一起使用，从而为您的媒体查询提供更大的灵活性。

// Extra map functions by Hugo Giraudel
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@function map-has-keys($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }
  }
  @return true;
}

@function map-has-nested-keys($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }
    $map: map-get($map, $key);
  }
  @return true;
}

这些是Hugo Giraudel 编写的额外地图功能。 map-deep-get 基本上是一个简化的嵌套 map-get 函数。 map-has-keys 就像 map-has-key 一样，它是 sass 内置的，但会检查多个键。 map-has-nested-keys 通过检查嵌套键对此进行了扩展。这对于这种方法至关重要。我肯定会研究他构建的额外 Sass 函数。我很容易找到它们的用途。

// Map
$sizes: (
  null: (
    breakpoint: 0,
    container: 100%
  ),
  xs: (
    breakpoint: 480px,
    container: 464px
  ),
  sm: (
    breakpoint: 768px,
    container: 750px
  ),
  md: (
    breakpoint: 992px,
    container: 970px
  ),
  lg: (
    breakpoint: 1200px,
    container: 1170px
  )
);

这是一个简单的断点图。我通常将其用作项目中所有设置的基本地图，因此我将在其中包含基本字体大小等内容。

// Breakpoint mixin
@mixin break($screen-min: null, $screen-max: null, $orientation: null) {
  $min: $screen-min;
  $max: $screen-max;
  $o: $orientation;
  $query: unquote("only screen");
  @if $min != null and $min != "" {
    @if map-has-nested-keys($base, sizes, $screen-min) {
      $min: map-deep-get($base, sizes, $screen-min, breakpoint);
    }
    @else {
      $min: $screen-min;
    }
    @if is-number($min) {
      $query: append($query, unquote("and (min-width: #{$min})"));
    }
  }
  @if $max != null and $max != "" {
    @if map-has-nested-keys($base, sizes, $screen-max) {
      $max: map-deep-get($base, sizes, $screen-max, breakpoint);
    }
    @else {
      $max: $screen-max;
    }
    @if is-number($max) {
      $query: append($query, unquote("and (max-width: #{$max})"));
    }
  }
  @if $orientation == landscape or $orientation == portrait {
    $o: $orientation;
    $query: append($query, unquote("and (orientation: #{$o})"));
  }
  @else {
    $o: null;
  }
  @media #{$query} {
    @content;
  }
};

这是混合。您可以使用尺寸映射中的键（xs、sm、md、lg）作为前两个参数，也可以使用自定义值（如 30em）。第三个参数接受横向或纵向。如果需要，您甚至可以自定义 make l = Landscape 和 p = Portrait 的 mixin。

此外，如果您只想要一个方向，例如，您可以传递参数（null、null、landscape）。

为了清楚起见，这里有一些例子：

@include break(null, md, landscape) {
  ...
}

@include break(null, null, landscape) {
  ...
}

@include break(md) {
  ...
}

@include break(null, md) {
  ...
}

@include break(480px) {
  ...
}

输出：

@media only screen and (max-width: 992px) and (orientation: landscape) {
  ...
}
@media only screen and (orientation: landscape) {
  ...
}
@media only screen and (min-width: 992px) {
  ...
}
@media only screen and (max-width: 992px) {
  ...
}
@media only screen and (min-width: 480px) {
  ...
}