0

Foundation 5 と Sass を使用しています。_settings.scss では、行とガターの幅を変更できます。デフォルトでは、行は 1000px に設定されていますが、Photoshop で 12 列のページの幅を測定すると、幅はちょうど 970px です。また、ガターの幅が 30px に設定されていることもわかりました。

私の質問は:なぜ 1000px の行が実際には 970px 幅なのですか? 私はそれについて心配する必要がありますか？または、1000px 幅のページが必要な場合は、行を 1030px に設定する必要がありますか?

4

1 に答える 1

0

あなたの質問に答えるには、グリッドと「ガター」がどのように構築されているかについてもっと知っておく必要があります。

大きなグリッド (large-*クラスを含む) は、64.062 em (~1025px) より広いビューポートに適用されます。大きなグリッドでは、「.row」は次のようになりました。

max-width: 62.5rem; // (~1000px)
width: 100%;

したがって、大画面では、.row実際に幅が 1000px になります。これで、グリッド列はパーセンテージを使用して各行に飛び込みます。したがって、large-12列 (12 列にまたがる) の幅は100%、large-4は 4/12 = 33,33%、large-1は 1/12 =になり8,33%ます。

上記は、 aがクラスlarge-12の幅を持っていることを意味するため、大きなグリッドでは 62.5rem; (~1000px)。100%.row

次のように、上記を表示できます。

HTML:

<div class="row">
  <div class="large-6 columns"><div>text</div></div>
  <div class="large-6 columns"><div>text</div></div>
</div>            
<div class="row">
  <div class="large-4 columns"><div>text</div></div>
  <div class="large-4 columns"><div>text</div></div>
  <div class="large-4 columns"><div>text</div></div>
</div>
<div class="row">
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
</div>

SCSS:

.row {
background-color: yellow;
div {
background-color: darkblue;
}
color: white;
}

ブラウザでは、前の例は次の図のように表示されます。

ここに画像の説明を入力

のボックス モデルは.row、幅が 1000px のままであることを示しています。

ここに画像の説明を入力

列の青色の背景色が行の黄色の背景色と完全に重なっているため、列の幅の合計も 1000px になるはずです。

次に樋について。デフォルトでは、ガターは次のように設定されていました: $column-gutter: rem-calc(30px);(1.875rem)

ガターを構築するために、グリッドの各列のgutter-size / 2両側に のパディングがありました。したがって、large-12列の幅は 1000 ピクセルですが、左側に 15 ピクセル、右側に 15 ピクセルのパディングがあります。そのため、行の幅は 1000 - 30 = 970 ピクセルのようです。

以前に使用した HTML に次の SCSS コードを適用することで、これらのガターを表示することもできます。

.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}

これで、グリッドは次のようになります。

ここに画像の説明を入力

large-12または、列のボックス モデルを調べることによって:

ここに画像の説明を入力

私の質問は: なぜ 1000px の行が実際には 970px 幅なのですか? 私はそれについて心配する必要がありますか？

最初から気にしなくていいと思います。上記を参照。

または、1000px 幅のページが必要な場合は、行を 1030px に設定する必要がありますか?

そうする正当な理由がある場合は、次を使用できます。$row-width: rem-calc(1030);実際、large-12意志のボックスモデルは次のようになります。

ここに画像の説明を入力

$medium-breakpoint: em-calc(1024);ビューポートが 1024 ピクセル以上で 1030 ピクセル未満の場合に水平スクロール バーが表示されないようにするには、1030 ピクセル以上の値に変更する必要があることに注意してください。

または、 を設定してガターを削除することを検討できます$column-gutter: 0;。参照: CSS グリッド フレームワークのガターのポイントは何ですか?

于 2015-05-02T22:23:45.850 に答える