2

Zurb Foundation 4を使用すると、小さなグリッド（768px未満の画面用）と大きなグリッドの両方に加えて、.show/hide-for-smallから.show/hide-for-xlargeまでのさまざまな可視性クラスが提供されます。

流動的で固定幅ではないレイアウトを開発する場合、開発者は画面サイズに応じて両方のグリッドを使用するか、dom要素を表示/非表示にするかを選択できます。特定のコンステレーション（たとえば、画面サイズが小さくなると4列から3列のレイアウトに切り替える）では、より複雑な測定が必要になる場合があります。例としては、基礎となるdom要素の構造変換や、実際のコンテンツの複製、画面サイズに基づいた関連構造の表示/非表示などがあります。

私の質問は、流体モードでZurbFoundationグリッドを操作するためのベストプラクティスがあるかどうかです。

4

1 に答える 1

1

Zurb Foundation の流体モードの意味がわかりません。

4 列から 3 列のレイアウトからラージ レイアウトからモバイル レイアウトへの切り替えに関しては、常に可視性クラスを行に配置してきました。

<div class="row hide-for-small">
  <div class="large-3 columns"></div>
  <div class="large-3 columns"></div>
  <div class="large-3 columns"></div>
  <div class="large-3 columns"></div>
</div>

<div class="row hide-for-medium-up">
  <div class="small-4 columns"></div>
  <div class="small-4 columns"></div>
  <div class="small-4 columns"></div>
</div>

それ以外の場合、通常の動作はスタックです。次のように、4 列から 3 列に移動して、列の 1 つを 12 幅に伸ばすことができます。

<div class="row">
  <div class="large-3 small-4 columns">Lorem ipsum dolor sit amet.</div>
  <div class="large-3 small-4 columns">Eius, ex vitae consequuntur nulla!</div>
  <div class="large-3 small-4 columns">Ipsam, assumenda ex non architecto.</div>
  <div class="large-3 small-12 columns">Tempore ipsa provident deserunt vel.</div>
</div>

また

<div class="row">
  <div class="large-3 small-12 columns">Tempore ipsa provident deserunt vel.</div>
  <div class="large-3 small-4 columns">Lorem ipsum dolor sit amet.</div>
  <div class="large-3 small-4 columns">Eius, ex vitae consequuntur nulla!</div>
  <div class="large-3 small-4 columns">Ipsam, assumenda ex non architecto.</div>
</div>
于 2013-06-08T17:54:07.307 に答える