如何使用Bourbon Neat框架实现移动端优先设计

Question

我一直在使用bourbon neat来进行桌面优先的布局，效果不错。但是，我想做一个以移动端为先的版本，从移动端开始逐步扩展。默认的网格是12列，在移动端上我通常使用4列网格。我尝试将我的网格更改为4列，然后再扩展到12列，但这并没有起作用。除了创建标准的桌面布局，然后在每个CSS选择器中添加一个移动设备媒体查询，并从移动版本开始逐步构建之外，是否有更好的方法来实现移动端优先呢？

- user2852784

Answer 1

对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个列，而不是原始Neat设置中的4个（对于我的项目所需）。您应该根据自己的项目调整这些设置。然而需要注意的是，我覆盖了$grid-columns变量，然后创建了我的新断点。此外，请确保在Neat之前导入您的_grid_setting.scss文件...

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

- ravenwilde

Answer 2

您应该使用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 列。

- Jorn Bakhuys

---

我认为你的例子有误。要采用移动优先策略，你需要先创建移动端的CSS样式，然后再添加媒体查询以自定义其他尺寸。 - nitely

这个看起来是对的，只是可能更容易理解一些，如果没有"mobile"断点（默认样式将是移动端）。相反你可以使用"$tablet"和"$desktop"，并随着屏幕尺寸变大逐渐构建样式。 - Ryan Bosinger

Answer 3

我建议你查看 Kenneth Ormandy 的 Chasers。它是一个包含了 "xn" 参数的小型 omega-reset(xn)，可以从前一个媒体查询的 omega(xn) 中传递参数。他在 Github 仓库中提供了大量的文档，并且你可以轻松地使用 Bower 或 NPM 进行安装。

- Cole Townsend

---

嗯，看起来Thoughbot自己建议不要使用omega-reset，而是使用媒体查询拆分。https://github.com/thoughtbot/neat#how-do-i-use-omega-in-a-mobile-first-workflow - deathlock