Question

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

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

但不知怎的，他们没有工作。我应该像这样使用min和max

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

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

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

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

Answer 2

一定要@import＆＃34; neat / neat-helpers＆＃34 ;;在_variables.scss或任何其他定义断点的文件中。在这里查看示例：https://github.com/thoughtbot/neat#getting-started

在SASS中定义断点

2 个答案: