整洁/欧米茄网格问题

Question

我对 Neat 非常陌生，目前正在研究一个显示图像库的简单网格。

我的代码

$mobile: new-breakpoint(max-width 500px);
$tablet: new-breakpoint(max-width 768px);

article{
  background-color: #efefef;
  margin-bottom: 2em;

  @include span-columns(3);
  @include omega(4n);

  @include media($tablet){
    background-color: orange;
    @include span-columns(4);
    @include omega(3n);
  }

  @include media($mobile){
    background-color: yellow;
    @include span-columns(6);
    @include omega(2n);
  }
}

现在在桌面上所有显示都应该如此，但是当我为 平板电脑 或 移动设备 调整大小时，布局会中断，并且我的布局会出现巨大的空白......我知道这是我想念的一个愚蠢的小东西，但就是看不到它（（（我希望有人能帮助我。

Answer 1

Omega 使用 Neat 可能有点棘手。我建议使用互斥媒体查询来解决您的问题，您可以在此处阅读有关它们的更多信息：

https://github.com/thoughtbot/neat#how-do-i-use-omega-in-a-mobile-first-workflow

这会阻止 omega 声明持续存在并破坏您的布局。

我会调整您的代码，使其看起来像这样：

$mobile: new-breakpoint(max-width 500px);
$tablet: new-breakpoint(min-width 501px max-width 768px);
$desktop: new-breakpoint(min-width 769px);

article{
  margin-bottom: 2em;
  @include media($mobile){
    background-color: yellow;
    @include span-columns(6);
    @include omega(2n);
  }

  @include media($tablet){
    background-color: orange;
    @include span-columns(4);
    @include omega(3n);
  }

  @include media($desktop){
    background-color: #efefef;
    @include span-columns(3);
    @include omega(4n);
  }
}

我在这里做了一个快速的笔，所以你可以看到它的实际效果：

http://codepen.io/mikehdesign/pen/qajxrW

对于这个例子，高度只是添加到article，如果你有内容就不需要了。

希望对你有帮助