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 的开发者版本）

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

chrome devtools 媒体查询断点被集成为只有一种媒体大小

chrome devtools media query breakpoints is integrated as only one media size

css

sass

google-chrome-devtools