2

私はフレームワークでcompass新しいsassプロジェクトを作成するために使用しましzurb foundation 4た。私のscreen.scssファイルは次のようになります。

// Reset and normalization settings
@import "normalize";

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

デフォルト設定には次の行が含まれます。

$row-width: 62.5em;

これは、少なくとも768pxの画面では、グリッド行が1000px（62.5em）である必要があることを意味します。

メディア条件をもう1つ追加する適切な方法は何ですか。これにより、$row-width1280px以上の画面で変数が75em（1200px）まで増加します。

4

1 に答える 1

11

次のように、app.scssに.rowのブレークポイントを作成します。

.row{
    @media #{$medium} {
        max-width: 75em;
    }
}

Foundationには、_visibility.scssのメディアクエリに使用される画面サイズの変数があります。たとえば、$mediumは「screenand（min-width：80em）のみ」に変換されます。まだ自分で試したことはありませんが、うまくいくはずです。また、この答えを見てください、私はそれを少し変更しました： https ://stackoverflow.com/a/14247136/961064

_visibility.scssで、さまざまな画面サイズの他の変数を見つけることができます：https ://github.com/zurb/foundation/blob/master/scss/foundation/components/_visibility.scss

于 2013-03-06T10:21:21.780 に答える