Question

我一直在使用bourbon neat做一个桌面第一个布局，工作正常。

然而，我想先做一个移动的第一版，从移动开始，然后继续努力。默认网格是12列，对于移动设备，我通常使用4的网格。我尝试将网格设置为4并扩展到12，但这不起作用。

除了创建标准桌面布局，然后将移动媒体查询放入每个CSS选择器并从移动版本开始并构建方式之外，是否有更好的方法来进行移动？

Answer 1

你应该用Neat的new-breakpoint mixin创建新的断点。但是，不像他们在示例中那样使用max-width，而是使用min-width。

例如：

@import "bourbon/bourbon";
@import "neat/neat";

$mobile: new-breakpoint(min-width 0px 4);
$tablet: new-breakpoint(min-width 760px 8);

.main {
  background: grey;

  @include media( $mobile ) {
    @include span-columns(4);
    background: white;
  }

  @include media( $tablet ) {
    @include span-columns(8);
    background: black;
    color: white;
  }
}

在示例中.main将具有白色背景并且由4列组成。当视口的宽度至少为760像素时，它将获得黑色背景并跨越8列。

Answer 2

要扩展Jorn的答案......您还需要将$grid-columns变量设置为移动宽度编号，而不是将其设置为默认值的桌面编号。这就是我正在处理的项目_grid_settings.scss文件的样子：

@import "../neat/neat-helpers";

// Neat Overrides
$column: golden-ratio(1em, 3);
$gutter: golden-ratio(1em, 1);
$grid-columns: 6;
$max-width: em(1280);


// Neat Breakpoints
$mobile-large-screen: em(480);
$tablet-small-screen: em(560);
$medium-screen: em(640);
$medium-large-screen: em(750);
$large-screen: em(860);
$x-large-screen: em(970);
$xx-large-screen: em(1088);
$super-large-screen: em(1280);

$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6);
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6);
$medium-screen-up: new-breakpoint(min-width $medium-screen 12);
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12);
$large-screen-up: new-breakpoint(min-width $large-screen 12);
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12);
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12);
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12);

你可以看到我创建了很多新的断点，我在移动宽度上使用了6个col，而在原始的Neat设置中使用了4个（我在项目中进行了必要的操作）。您应该定制这些设置以适合您自己的项目。但要点的是，我正在覆盖$grid-columns变量，然后创建新的断点。此外，请务必导入_grid_setting.scss BEFORE Neat ...

@import "bourbon/bourbon";
@import "grid_settings";
@import "neat/neat";

Answer 3

我将由Kenneth Ormandy解决Chasers。它有点omega-reset(xn)包括从之前的媒体查询omega(xn)传递“xn”。他提供了大量关于github repo的文档，您可以使用Bower或NPM轻松安装它。

如何使用Bourbon Neat Framework首先进行移动

3 个答案: