Question

我的CSS文件中包含以下内容，并且在屏幕宽度超过899px时，--md和--sm周围的规则都关闭，因此效果很好。

.ProductThumbnail {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
    &--md,
    &--sm {

      display: none;
      background-position: 30% top;

      @include media('sm', true, true) {
        display: block;
      }
    }

    &--lg {

      display: none;
      background-position: 25% top;
      width: 1600px;

      @include media('md', true) {
        display: block;
      }
    }
}

react组件中的return函数如下：

return (
  <>
    <div
      className="ProductThumbnail__bg ProductThumbnail__bg--xs"
      style={{
        backgroundImage: getURL({
          w: 600,
          h: 455,
        }),
      }}
    />
    <div
      className="ProductThumbnail__bg ProductThumbnail__bg--md"
      style={{
        backgroundImage: getURL({
          h: 455,
        }),
      }}
    />
    <div
      className="ProductThumbnail__bg ProductThumbnail__bg--lg"
      style={{
        backgroundImage: getURL({
          w: 2560,
          h: 1040,
        }),
      }}
    />
  </>
);

我在开发工具中看到规则正在按预期应用于--md和--sm，但是当屏幕变大时它们不会消失。

更新，媒体混合代码：

@mixin media(
  $breakpoint,
  $is-minimum-only: false,
  $is-maximum-only: false) {

  @if map_has_key($breakpoint-ranges, $breakpoint) {
    $breakpoint-range: get-break-point-range($breakpoint);
    $breakpoint: "";

    @if length($breakpoint-range) < 2 or $is-minimum-only {
      $breakpoint: "(min-width:#{nth($breakpoint-range, 1)})";
    } @else if $is-maximum-only {
      $breakpoint: "(max-width:#{nth($breakpoint-range, 2)})";
    } @else {
      $breakpoint: "(min-width:#{nth($breakpoint-range, 1)}) and (max-width:#{nth($breakpoint-range, 2)})";
    }

    @media screen and #{$breakpoint} {
      @content;
    }

  } @else {
    @warn "No registered breakpoint for `#{$breakpoint}`";
  }
}

Answer 1

如果我正确理解了您的mixin，则如果未设置“ $ is-minimum-only”或“ $ is-maximum-only”，它将生成一个带有“ min”和“ max”值的媒体查询。因此，在您的情况下，我将在此行中删除这两个“ true”设置：

 @include media('sm', true, true) {

所以看起来像这样

 @include media('sm') {

现在，“ @ if length（$ breakpoint-range）”语句中的第三种情况应生效。

不确定将两个变量都设置为“ true”是否有意义。因为它们的名称中只有一个“ only”，所以我想只能同时应用其中的一个；）

我希望有帮助。

屏幕变大时，@ media规则未关闭

1 个答案: