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

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

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，如果您有内容，则无需添加。

希望这有帮助

整洁/欧米茄网格问题

1 个答案: