SASS 中的媒体查询编译但不显示

Question

我正在构建一个具有响应式媒体查询的网站。如果屏幕为 900 像素或更小（最大宽度），我有一个查询。我创建了一个 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 像素或更小的分辨率显示。我做错了什么？

Answer 1

媒体查询工作正常，但由于填充宽度超过 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;
      }

  }
}

示例：https://codepen.io/anon/pen/MxgaVR