chrome devtools 媒体查询断点仅集成为一种媒体大小

Question

这是我的 Sass 代码，

我对此进行了多次测试并确认媒体查询有效

但是在 Chrome devtools 中，只有一个（75em）媒体查询（大约最大宽度）出现..

//mixin for media queries
@mixin for-phone {
    @media (max-width: 37.5em) { @content }; // 600px
}
@mixin for-tab-port {
    @media (max-width: 56.25em) { @content }; // 900px
}
@mixin for-tab-land {
    @media (max-width: 75em) { @content }; // 1200px
  }
@mixin for-big-desktop {
    @media (min-width: 112.5em) { @content }; // above 1800px
}

// main.scss
html {
  font-size: 62.5%; // 1rem = 10px, 10/16 = 62.5%

  @include for-tab-land {
    font-size: 56.25%; // 1rem = 9px, 9/16 = 50%
  }

  @include for-tab-port {
    font-size: 50%; // 1rem = 9px, 9/16 = 50%
  }

  @include for-phone {
    font-size: 30%; // 1rem = 9px, 9/16 = 50%
  }

  @include for-big-desktop {
    font-size: 75%; // 1rem = 9px, 9/16 = 50%
  }

}

我为此挣扎了三天多。而还没找到问题所在。

正如您在源面板中看到下面的屏幕截图，源代码中有 3 个媒体大小

但只有 75em 显示。

请帮帮我....

Answer 1

Chrome Dev 或 Chrome Canary 可以正常工作。 （都是 Chrome 的开发者版本）

正如您在下面的屏幕截图中看到的，显示了多个最大宽度媒体查询