8

私はバーボンニートを使用して、デスクトップの最初のレイアウトをうまく機能させてきました。

しかし、私はモバイルから始めて、自分のやり方で作業を進めて、モバイル ファースト バージョンを作成したいと考えています。デフォルトのグリッドは 12 列で、モバイルでは通常 4 のグリッドを使用します。グリッドを 4 に変更して 12 に拡大しようとしましたが、うまくいきませんでした。

標準のデスクトップ レイアウトを作成し、次にモバイル メディア クエリを各 CSS セレクターに配置し、モバイル バージョンから開始して方法を構築する以外に、モバイルを最初に行うためのより良い方法はありますか?

4

3 に答える 3

6

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 列にまたがります。

于 2013-11-05T11:40:44.500 に答える
6

$grid-columnsJornの答えを拡張するには...デフォルトとして設定されているデスクトップの数とは対照的に、変数をモバイルの幅の数に設定する必要もあります。_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);

多くの新しいブレークポイントを作成し、元の Neat 設定の 4 列とは対照的に、モバイル幅で 6 列を使用していることがわかります (私のプロジェクトで行っていることに必要です)。これらの設定は、独自のプロジェクトで機能するように調整する必要があります。$grid-columnsただし、重要なのは、変数をオーバーライドしてから、新しいブレークポイントを作成していることです。また、必ずBEFORE Neatをインポートしてください_grid_setting.scss...

@import "bourbon/bourbon";
@import "grid_settings";
@import "neat/neat";
于 2015-06-02T14:09:50.650 に答える