8

我一直在使用波旁威士忌做一个桌面优先的布局，效果很好。

但是，我想做一个移动优先版本，从移动开始，然后逐步上升。默认网格是 12 列，对于移动设备，我通常使用 4 的网格。我尝试将网格更改为 4 并扩展到 12，但这不起作用。

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

4

3 回答 3

6

您应该使用 Neat 的 new-breakpoint mixin 创建新断点。但是，您可以使用 min-width，而不是像他们在示例中那样使用 max-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 列。

于 2013-11-05T11:40:44.500 回答
6

要扩展 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变量，然后创建了新的断点。此外，请务必导入您的_grid_setting.scssBEFORE Neat ...

@import "bourbon/bourbon";
@import "grid_settings";
@import "neat/neat";
于 2015-06-02T14:09:50.650 回答
2

我会找出肯尼斯·奥曼迪（Kenneth Ormandy）的追逐者。它有点omega-reset(xn)包括从以前的媒体查询传递“xn” omega(xn)。他在 github repo 上提供了大量文档，您可以使用 Bower 或 NPM 轻松安装它。

于 2015-03-22T04:02:43.727 回答