Css SASS中的媒体查询正在编译但未显示

我正在建立一个有回应性媒体查询的网站。我有一个查询，如果屏幕为900px或更小（最大宽度），则会进行调整。我创建了一个mixin来帮助管理我的查询

@mixin responsive ($breakpoint){
@if $breakpoint == phone {
    @media(max-width: 37.5em){ @content };  // 600px
}
@if $breakpoint == tab-port {
    @media(max-width: 56.25em){ @content };   // 900px
}
@if $breakpoint == tab-land {
    @media(max-width: 75em){ @content };  // 1200px
}
@if $breakpoint == big-desktop {
    @media(min-width: 112.5em){ @content };  // 1800px
 }
}

那么，我将在SASS中使用它

.div{

&__container {
    display: flex;
    padding: 5rem;
    margin: 0 auto;
    width: 80%;

    @include responsive(tab-port) {
        width: 90%;
    }

}

它编译正确

.div__container {
  display: flex;
  padding: 5rem;
  margin: 0 auto;
  width: 80%; 
}
  @media (max-width: 56.25em) {

.div__container {

 width: 90%; 
 } 
}

---

但它在网站上的显示速度并没有任何不同，900像素或更低。我做错了什么？

媒体查询工作正常，但由于填充宽度超过80%

.div {

  &__container {
      display: flex;
      // padding: 5rem;
      margin: 0 auto;
      width: 80%;
      border: 5px solid red;

      @include responsive(tab-port) {
          width: 90%;
          border: 5px solid blue;
      }

  }
}

---

示例：

编译后的CSS看起来很好，您确定什么都没有发生吗？检查te元素以确保安全，放置更多可见的代码，如

font-weight:bold

以确保安全，并手动调整视口大小（如果您明确希望

px

，为什么要使用

em

值？）我看到您的代码笔工作正常，但当我尝试在代码中放置相同的内容并编译它时，浏览器中实际上没有任何更改。这些查询不会出现在Chrome调试器中，我已经尝试添加边框并将文本转换为大写，以使任何更改更加明显。当我在调试器中手动更改页面大小时，似乎没有任何变化。编辑：当我手动将浏览器窗口自身移动到调试器外部时，我会看到更改。为什么会发生这种变化？chrome调试器有时会出现bug。我看得太多了。尝试重新安装chromehow讽刺lol。。。。好吧，我试试看会发生什么。就目前而言，我的查询应该可以正常工作，我的代码没有问题吧？