Html Sass@mixin断点仅处理手机/平板电脑样式

为了更好地理解Sass mixin的使用，我正在尝试学习将它们用于媒体查询断点，而它似乎只在

37.5em

上下处理它们。因此，如果您查看我在下面发布的SCSS代码，它将呈现

mobileonly

（在视口窗口上的

37.5em

下方）和

phablet

（在视口窗口上的

37.5em

）的样式，但不会呈现

笔记本电脑

或

台式机的样式。当视口窗口被拉长得更大时，它不会改变我声明的十六进制变量。根据Chrome开发工具，媒体查询似乎正在工作，但是
@media（最小宽度：37.5em）
似乎仍在覆盖样式，因为我想要的样式在开发工具中被划掉了。因此，即使在整个视口窗口大小下，
@media（最小宽度：37.5em）
也是唯一应用的样式。为什么会这样

这是我的问题的一部分

为了进一步澄清，以下是我的代码：

HTML:

编辑：添加输出CSS:

header {
  height: 600px;
  width: 100%;
}
@media (min-width: 70em) {
  header {
    background-color: #f3f4f4;
  }
}
@media (min-width: 64em) {
  header {
    background-color: #2bb656;
  }
}
@media (min-width: 37.5em) {
  header {
    background-color: #364141;
  }
}
@media (max-width: 37.5em) {
  header {
    background-color: #75dd66;
  }
}

这里的问题是，为
min-width:37.5em
编写的样式会覆盖为
min-width:64em
编写的样式，其他情况也是如此。为此，请尝试同时设置
最小宽度
和
最大宽度
，以使样式特定

是js小提琴。
这肯定奏效了。谢谢。出于某种原因，我认为当在视口窗口中达到新宽度时，
min width
会覆盖。
$azure: #f3f4f4;
$chateau-green: #2bb656;
$firefly: #364141;
$fern: #59cb59;
$pastel-green: #75dd66;
$pigment-green: #0ca750;

@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 70em) { @content ; }
 }
  @else if $point == laptop {
    @media (min-width: 64em) { @content ; }
 }
   @else if $point == tablet {
    @media (min-width: 50em) { @content ; }
 }
  @else if $point == phablet {
    @media (min-width: 37.5em)  { @content ; }
 }
 @else if $point == mobileonly {
    @media (max-width: 37.5em)  { @content ; }

 }
}

header {
  height: 600px;
  width:100%;
  @include breakpoint(desktop) {
    background-color:$azure;
  }
  @include breakpoint(laptop) {
    background-color:$chateau-green;
  }
  @include breakpoint(phablet) {
    background-color:$firefly;
  }
  @include breakpoint(mobileonly) {
        background-color:$pastel-green;
    }
}

header {
  height: 600px;
  width: 100%;
}
@media (min-width: 70em) {
  header {
    background-color: #f3f4f4;
  }
}
@media (min-width: 64em) {
  header {
    background-color: #2bb656;
  }
}
@media (min-width: 37.5em) {
  header {
    background-color: #364141;
  }
}
@media (max-width: 37.5em) {
  header {
    background-color: #75dd66;
  }
}