1

我在这里很困惑。我将 Sass 用于 Bourbon Neat，但我无法使用 Neat 设置断点。不知何故，它们无法在移动设备和浏览器中正确显示。这是代码

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(max-width 1335px 10); 
$desktop: new-breakpoint(max-width 1920px 10);

但不知何故，他们不工作。我应该像这样使用最小值和最大值吗

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(min-width 801px 10); 
$desktop: new-breakpoint(min-width 1337px 10);

请给我一些建议，因为我完全无法找到解决方案。谢谢。

4

2 回答 2

1

首先，我建议您首先考虑移动（小）屏幕进行设计，这意味着您应该始终使用min-width而不是max-width从小屏幕逐步升级到大屏幕。

使用定义断点后new-breakpoint()：

$mobile: new-breakpoint(min-width 480px 4);

您已准备好通过media()样式中的 mixin 使用它：

.selector {
  font-size: 12px;

  @include media($mobile) {
    font-size: 18px;
  }
 }

结合起来，您应该最终得到以下 CSS：

/* Smallest size as default ... */
.selector {
  font-size: 12px;
}

@media screen and (min-width: 480px) {
  /* Bigger font for screens of 480px and up ... */
  .selector {
    font-size: 18px;
  }
}

如果这不是您所追求的，请发布有关如何使用断点的更多详细信息。

于 2014-07-25T08:37:24.940 回答
0

一定要@import "neat/neat-helpers"；在您的 _variables.scss 或任何其他定义断点的文件中。看这里的例子：https ://github.com/thoughtbot/neat#getting-started

于 2014-08-05T09:47:34.050 回答