1

Foundation Zurb 5 では、Tablet Portrait 用の準備ができているグリッド クラスはありますか? クラスが 3 つしかないことに気付きました (小、中、大)。css ファイルに特定のメディア クエリを記述せずに、ミディアム (タブレット) の縦向きに別のレイアウトを使用したい場合はどうすればよいですか? 私は次のようなものが欲しいです（プログラマーにとって非常に簡単になります）：

.medium-portrait-12
.medium-portrait-11
.medium-portrait-10
.medium-portrait-9
.medium-portrait-8 etc.

ファウンデーション設定ファイル (SASS) を使用してこれらのクラスを生成できれば幸いです。

ありがとう、

4

3 に答える 3

0

あなたがこれを整理したかどうかはわかりませんが、私は SASS ファイルをざっと見て、いくつかの便利な mixin を見つけました。これはあなたが意味するものですか？

@media #{$screen} and (orientation: portrait) and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)}) {
    @include grid-html-classes($size:medium-portrait);
    @include block-grid-html-classes($size:medium-portrait,$include-spacing:false);
}

HTML で使用するには、次のようにします。

<div class="row">
    <div class="columns small-6 medium-portrait-4 medium-3"></div>
</div>

(およびブロック グリッドの場合)

<ul class="small-block-grid-2 medium-portrait-block-grid-3 medium-block-grid-3">
    <li></li>
    <li></li>
</ul>

これらのクラスの実験を始めたばかりなので、デバイスによって問題が発生する可能性があります。

于 2015-03-01T00:35:29.630 に答える