問題タブ [gutter]

Susy を使い始めて、その機能に非常に感銘を受けました。現時点では、4 つのメディア クエリがある Web を作成しています。

最後の 2 つの $small と $large については、px と 10px のガターで幅が固定された 2 つの列が必要です。すべてのブラウザーで結果が同じに見えることを確認したいので、% にガターは必要ありません。

したがって、固定されたコロンヌスには、susy-breakpoint を使用します

それで、私の主な質問:グリッドをより細かく制御するためにガターを%ではなく(1/1.5のように)固定する方法とベストプラクティスは何ですか?

誰も答えていないので、固定された溝と列を取得するために「独自の方法」を考え出しました。

設定は次のとおりです。

そしてメインscss：

しかし、主な質問はまだ未解決です: -グリッドとガターを固定するベストプラクティスは何ですか?

私が提案したコードでは、私は使用しています

スパン（ピクセル）

$susy% の列でスパンを使用しない場合のセットアップ方法

列数: 24、列幅: 40px、

下記参照：

ここをクリックして画像をご覧ください。質問は http://imgr.es/26LP

ポール・アイリッシュのグローバル・ボックス・サイジングを使用しているため、ガターにパディングを追加することはできません。

私のコードに従います：

列スパンの 4 分の 1/5 にまたがるガターを生成しようとしています。グローバル設定は次のとおりです。

このセレクターが続きます:

生成された CSS.mosaicは次のとおりです。

各辺のパディングは 4/5 / 12 (列) / 2 (辺) = 1/30 = 3.333...% であると予想していました。 ) 列スパンの合計幅。

1. 期待される結果を得るにはどうすればよいですか?
2. パディング値 (1.85...%) はどのように計算されますか?
3. 期待したものと一致しないのはなぜですか?

行内で 4 つの列を使用しているブートストラップでページを作成しています。コード：

各列にクラスを追加して、それぞれに境界線を設定できるようにしました。

問題は、ブートストラップ グリッドの自然なガターによって境界線を分離する必要があり、それが機能していないことです。

私を手伝ってくれますか？ありがとう。

最近、別のコンピューターでデフォルトで「オン」になっているのを見るまで、このガターカラー/描画可能なプレビュー機能についても知りませんでした...

とにかく、ワークステーションに戻って、機能を有効にしようとしましたが、うまくいきません。

基本的に、たとえば、colors.xml を開くと、画面は次のようになります: http://i.imgur.com/HUR156y.png

私の設定では、ガタープレビューを有効にするために必要なオプションがチェックされていると思います: http://i.imgur.com/cqwONhb.png

ガターの私のカラー/ドローアブルプレビューはどこにありますか? これらは、xml ファイルと Java ファイルの両方には表示されません。

ありがとう/BR/リチャード

使用している純粋なグリッドにガターを追加する必要があります。デフォルトでは、次の例のような通常の純粋なグリッド css で動作する必要があるためです。

私がこれまでに試したこと：

私も試してみましたが、うまくいきbox-sizingませんでした：

また、ブラウザのサポートについても心配する必要があります。それほどではありませんが、古いブラウザがそれらを正しく表示するなら素晴らしいことです。

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

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