2

使用 Zurb Foundation 4 提供了小网格（用于 768 像素以下的屏幕）和大网格以及从 .show/hide-for-small 到 .show/hide-for-xlarge 的各种可见性类。

开发流畅的、非固定宽度的布局，开发人员可以根据屏幕大小选择使用网格或显示/隐藏 dom 元素。对于某些星座（例如，当屏幕尺寸减小时从四列布局切换到三列布局），可能需要更复杂的测量。示例可以是底层 dom 元素的结构转换或复制实际内容以及根据屏幕大小显示/隐藏相关结构。

我的问题是什么/是否有在流体模式下使用 Zurb Foundation 网格的最佳实践？

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 列，然后将其中一列拉伸 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 回答