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

【问题标题】：Sass @mixin breakpoints only processing mobile/tablet stylesSass @mixin 断点仅处理手机/平板电脑样式
【发布时间】：2018-01-30 04:41:49
【问题描述】：

为了更好地理解 Sass mixin 的使用，我正在尝试学习将它们用于我的媒体查询断点，它似乎只在 37.5em 的上方和下方处理它们。因此，如果您查看我在下面发布的 SCSS 代码，它将呈现 mobileonly(below 37.5em on viewport window) 和 phablet(above 37.5em 在视口窗口上），但不适用于 laptop 或 desktop。当视口窗口被拉伸得更大时，它不会超过我声明的 $firefly 十六进制变量。根据 Chrome 开发工具，媒体查询似乎正在工作，但 @media (min-width: 37.5em) 似乎仍在覆盖样式，因为我想要的样式在开发工具中被划掉了。因此，即使在完整的视口窗口大小下，@media (min-width: 37.5em) 也是唯一应用的样式。为什么会这样？

Here 是我的确切问题的一个 jsfiddle。

为了进一步说明，这是我的代码：

HTML：

<html>
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/build/main.css">
  </head>
<body>
  <header>
  </header>
</body>
</html>

SCSS：

$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;
    }
}

编辑：添加输出的 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;
  }
}

【问题讨论】：

标签： html sass media-queries mixins

【解决方案1】：

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

Here 是 js 小提琴。

【讨论】：

这绝对有效。非常感谢。出于某种原因，我认为min-width 会在视口窗口中达到新宽度时覆盖。