css - @media 规则在屏幕变大时不会关闭

Question

我的 CSS 文件中有以下内容，除了关于 --md 和 --sm 的规则在屏幕宽度变大时不会关闭外，它工作正常超过 899px。

.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 (
  <>
    <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

如果我正确理解你的混合，如果没有设置“$is-minimum-only”或“$is-maximum-only”，它应该生成一个带有“min”和“max”值的媒体查询。因此，在您的情况下，我将删除此行中的两个“true”设置:

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

看起来像这样

 @include media('sm') {

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

不确定将两个变量都设置为“true”是否有意义。因为他们的名字中有一个“唯一”，我想他们中只有一个人应该同时申请；)

希望对您有所帮助。