@media 规则在屏幕变大时不会关闭答案

【问题标题】：@media rule not turning off when screen gets larger@media 规则在屏幕变大时不会关闭
【发布时间】：2019-09-27 07:29:17
【问题描述】：

我的 CSS 文件中有以下内容，除了在屏幕宽度超过 899 像素时关闭 --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 (
  <>
    <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}`";
  }
}

【问题讨论】：

嗨，Wazza，您能否提供您的“media()”混入的代码？我有一个猜测；）
@Kani 刚刚添加 :) 感谢您的关注

标签： css reactjs typescript

【解决方案1】：

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

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

看起来像这样

 @include media('sm') {

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

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

希望对你有帮助。

【讨论】：